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

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

image-20220716113212751

开始使用

完整构建

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

  1. 鲍尔bower install hint.css
  2. npmnpm install --save hint.css
  3. CDNhttps ://www.jsdelivr.com/package/npm/hint.csshttps://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/

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容