当前位置:主页 > CSS3库 > 通知 / 提示 >

纯CSS工具提示库 – Cooltipz.css
栏目分类:通知 / 提示   发布日期:2021-09-02   浏览次数:

Cooltipz.css 是一个轻量级、可访问、仅 CSS、可配置的工具提示库,用于现代 Web UI/UX 设计。

使用:

1. 安装并下载 Cooltipz.css。

# NPM
$ npm install cooltipz-css --save

2. 导入 Cooltipz.css。

import 'cooltipz-css';
// 或
@import '~cooltipz-css/src/cooltipz';

3. 或者在网页上包含“cooltipz.min.css”样式表。

<link href="cooltipz.min.css" rel="stylesheet" />


4.在aria-label属性中定义tooltip内容,确定tooltip的方向(上、下、右、左、左下、左上、右上、右下)。就是这样。

<button aria-label="提示内容"
        data-cooltipz-dir="bottom">
        悬停
</button>
<!-- 或 -->
<button aria-label="提示内容"
        class="cooltipz--bottom">
        悬停
</button>

5. 禁用显示/隐藏动画。

<!-- 或 -->
<button aria-label="提示内容"
        data-cooltipz-dir="bottom"
        data-cooltipz-static>
        悬停
</button>
 
<!-- 或 -->
<button aria-label="提示内容"
        class="cooltipz--bottom cooltipz--static">
        悬停
</button>

6. 使工具提示始终可见。

<!-- 或 -->
<button aria-label="提示内容"
        data-cooltipz-dir="bottom"
        data-cooltipz-visible>
        悬停
</button>
 
<!-- 或 -->
<button aria-label="提示内容"
        class="cooltipz--bottom cooltipz--visible">
        悬停
</button>

7. 覆盖工具提示的默认样式。

:root {
  --cooltipz-bg-color: #1f1f1f;
  --cooltipz-text-color: #fff;
  --cooltipz-font-size: 0.75rem;
  --cooltipz-slide: 6px;
  --cooltipz-border-radius: 0.125rem;
  --cooltipz-timing: 120ms;
  --cooltipz-cursor: pointer;
  --cooltipz-small: 6.25rem;
  --cooltipz-medium: 12.5rem;
  --cooltipz-large: 18.75rem;
  --cooltipz-arrow-size: 0.3125rem;
  --cooltipz-delay-show: 0s;
  --cooltipz-delay-hide: 0s;
}

8. 设置工具提示大小:适合、小、中、大。

<button aria-label="提示内容"
        data-cooltipz-dir="bottom"
        data-cooltipz-size="fit"> 
        悬停
</button>
 
<button aria-label="提示内容"
        data-cooltipz-dir="bottom"
        data-cooltipz-size="large"> 
        悬停
</button>

9. 在工具提示中显示 Font Awesome 图标:

:root {
  --cooltipz-fontawesome: "Font Awesome 5 Free";
}
<button data-cooltipz-dir="top" aria-label="Font Awesome: &#xf03e; &#xf200; &#xf188; &#xf007;">
  悬停
</button>



官方网站:https://cooltipz.jackdomleo.dev/

相关热词: Cooltipz.css工具提示

上一篇:没有了
下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库