使用Tooltips库在页面进行hint提示

来源：互联网发布：ubuntu无法登录界面编辑：程序博客网时间：2024/06/05 09:05

有时候我们前端页面一些按钮或内容，当鼠标悬停在上面时给予一定的提示。那么我们就可以使用该样式库，使用起来很方便。

样式在以下链接下载:
在线DEMO:http://kushagragour.in/lab/hint/
下载地址(Github):https://github.com/chinchang/hint.css

这里写图片描述

简单示例:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <link href="css/hint.css" rel="stylesheet" />    </head>    <body>        <br /><br /><br />        <div class="hint--bottom-right" data-hint="提示">            下右        </div>        <div class="hint--bottom-left" data-hint="提示">            下左        </div>        <div class="hint--right" data-hint="提示">            右        </div>        <div class="hint--top" data-hint="提示">            上        </div>        <div class="hint--left" data-hint="提示">            左        </div>        <div class="hint--top-left" data-hint="提示">            左上        </div>        <div class="hint--bottom" data-hint="提示">            下        </div>        <div class="hint--bottom hint--error" data-hint="提示">            错误        </div>        <div class="hint--bottom hint--warning" data-hint="提示">            警告        </div>        <div class="hint--bottom hint--info" data-hint="提示">            信息        </div>        <div class="hint--bottom hint--success" data-hint="提示">            成功        </div>        <div class="hint--top  hint--small" data-hint="小">                                小        </div>        <div class="hint--top  hint--medium" data-hint="中">                                 中        </div>        <div class="hint--top-left  hint--large"  data-hint="大">                                大        </div>        <div class="hint--bottom  hint--always" aria-label="一直显示">               一直显示        </div>        <br />        <div class="hint--bottom  hint--rounded" aria-label="显示">                     圆角显示        <div/>    </body></html>

这里写图片描述

阅读全文

0 0