zoukankan      html  css  js  c++  java
  • Tippy.js 玩转鼠标悬停提示信息

    Tippy.js 玩转鼠标悬停提示信息

    原文:http://www.shejidaren.com/tippy-js.html

    网页设计师对 tooltips 鼠标经过提示效果应该不陌生,这种效果虽然可以直接用 css hover 来实现,但是如果想更友好的、更美观的效果,可能就要借助 JS 来实现啦。今天和大家分享的 Tippy.js 就是很不错的鼠标悬念插件,多种提示信息用法及样式,并且是轻量级哦。

    tooltips 鼠标悬停提示效果

    网站名称:Tippy.js
    下载&预览:https://atomiks.github.io/tippyjs/

    截图演示

    默认:
    这是鼠标经过最基本的效果

    方向:
    如果你想设备不同的方向也是可以的,比如上、下、左、右

    箭头样式:
    也可以加入箭头样式,让提示更加清晰。

    动画:
    可以给tooltips提示效果加入动画效果,这里只展示了一小部分

    样式:
    提示效果还能加样式的哦,你看:

    HTML 样式:
    还能 在提示框里加入 HTML 元素。

    其它效果

    达人只截取图一部分截图,官方网页还有更多的演示和详细使用教程哦!

    使用教程

    第1步:引入 JS 插件

    <head>
      ...
      <script src="tippy.all.min.js"></script>
    </head>
    

    第2步:HTML 代码

    <button class="btn" title="I'm a tooltip!">Text</button>
    <button class="btn" title="<strong>I'm a bold tooltip!</strong>">Text</button>
    

    第3步:指定要执行 JS 效果的元素

    <script>
      tippy('.btn')
    </script>
    

    额外选项:你可以为这个元素增加一些动画效果,更多参数请参考官网哦。

    <script>
    tippy('.btn', {
      placement: 'right',
      animation: 'scale',
      duration: 1000,
      arrow: true
    })
    </script>
    

    好了,如果以后需要做好看的 tootips 提示样式,不妨试试这个插件,仅14KB哦!

    推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
  • 相关阅读:
    MySQL、Redis 和 MongoDB 的优缺点
    解决数据库高并发
    数据库事务
    Mysql 数据库存储的原理?
    CSRF
    MVC模型和MVT模型
    AJAX
    正则表达式-re模块
    ddt-数据驱动测试
    python-时间格式化
  • 原文地址:https://www.cnblogs.com/jiangyuzhen/p/10946229.html
Copyright © 2011-2022 走看看