hint.css是一个20kb的css，却实现了和多炫酷的提示效果，无需javascript代码，无需javascript代码，无需javascript代码，重要的事情说三遍，具体是什么效果呢？可以查看自己尝试添加一下，下面来给你做个简单演示，3分钟让你学会怎么用！

1、网页head部分引用hint.css

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

2、使用

设置提示框的位置：

<span class="hint--位置" aria-label="提示语">html内容</span>

位置相关的class类

左←：hint--left

右→：hint--right

左上↖：hint--top-left

上↑：hint--top

右上↗：hint--top-right

左下↙：hint--bottom-left

下↓：hint--bottom

右下↘：hint--bottom-right

设置提示框的颜色：

<span class="hint--位置" class="hint--颜色" aria-label="提示语">html内容</span>

颜色相关的class类

红色警告：hint--error

黄色提醒：hint--warning

绿色通过：hint--success

蓝色正常：hint--info

<span class="hint--位置" class="hint--颜色" aria-label="提示语">html内容</span>

大小相关的class类

小号：hint--small

中号：hint--medium

大号：hint--large

好了，关于纯代码实现提示功能的分享完毕，通过上面各种类的排列组合，完全可以自由发挥，可以自己设置多种不同的风格哦。

hint.css下载：

hint.zip

来源：陈德馨博客（微信/QQ号：35435164），转载请保留出处和链接！

地址：https://www.chendexin.com/archives/447.html