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

最新推荐文章于 2021-06-22 21:11:32 发布

晨风&

最新推荐文章于 2021-06-22 21:11:32 发布

阅读量617

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/cjq2013/article/details/77512183

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

样式在以下链接下载:
在线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

收藏

觉得还不错? 一键收藏
0
评论
使用Tooltips库在页面进行hint提示

有时候我们前端页面一些按钮或内容，当鼠标悬停在上面时给予一定的提示。那么我们就可以使用该样式库，使用起来很方便。样式在以下链接下载: 在线DEMO:http://kushagragour.in/lab/hint/ 下载地址(Github):https://github.com/chinchang/hint.css简单示例:<!DOCTYPE html><html> <head>
复制链接

扫一扫

专栏目录