hint.css，一款CSS 工具提示库

hint.css是作为纯 CSS 资源编写的，您可以使用它为您的 Web 应用程序创建很酷的可访问工具提示。它不依赖于 JavaScript，而是使用aria-label / data – attribute *、伪元素、内容属性和CSS3 转换来创建工具提示。它还使用BEM命名约定，特别是修饰符。

开始使用

完整构建

• [未缩小]： https ://raw.github.com/chinchang/hint.css/master/hint.css
• [缩小]：https ://raw.github.com/chinchang/hint.css/master/hint.min.css

基础构建（不包括颜色主题和花哨的效果）

• [未缩小]： https ://raw.github.com/chinchang/hint.css/master/hint.base.css
• [缩小]：https ://raw.github.com/chinchang/hint.css/master/hint.base.min.css

1. 鲍尔：bower install hint.css
2. npm：npm install --save hint.css
3. CDN：https ://www.jsdelivr.com/package/npm/hint.css或https://cdnjs.com/libraries/hint.css

现在将库包含在HEAD页面的标签中：

 <link rel="stylesheet" href="hint.css" />

或者

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

现在，您需要做的就是使用该aria-label属性为您的元素提供任何位置类和工具提示文本。注意，如果您不想使用aria-label属性，您也可以使用属性指定工具提示文本data-hint，但建议使用它来aria-label支持可访问性。阅读更多关于 aria-label 的信息。

 Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover me.</span>

以各种组合将其与其他可用修饰符一起使用。可用的修饰符：

• 颜色– hint--error, hint--info, hint--warning,hint--success
• 尺寸– hint--small, hint--medium,hint--large
• hint--always
• hint--rounded
• hint--no-animate
• hint--bounce
• hint--no-arrow

预览地址

https://kushagra.dev/lab/hint/