邮件评论回复又挂了~

MENU

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

September 8, 2018 • 实用技巧

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

默认:
这是鼠标经过最基本的效果
请输入图片描述

方向:
如果你想设备不同的方向也是可以的,比如上、下、左、右
请输入图片描述

动画:
可以给tooltips提示效果加入动画效果,这里只展示了一小部分
请输入图片描述

箭头样式:
也可以加入箭头样式,让提示更加清晰。
请输入图片描述

样式:
提示效果还能加样式的哦,你看:
请输入图片描述

官网还有更多功能就不一一列举了,点击下载
食用方法
引用JS

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

HTML 代码

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

指定要执行 JS 效果的元素

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

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

<script>
tippy('.btn', {
  placement: 'right',
  animation: 'scale',
  duration: 1000,
  arrow: true
})
</script>
Last Modified: October 28, 2018
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

9 Comments
  1. 不错不错,最近老铁在忙啥呢~~

    1. @小轲一点都不忙。在家葛优躺@(笑尿)

  2. 很专业,有深度的技术博客

    1. @塑胶跑道在大朗水平呆过一年@(勉强)

  3. @(哈哈)完全玩不转……

    1. @灰常记忆看起来很强,但是蓝并软的东西@(酸爽)

  4. 为每一个家庭提供及时的智能健康服务,让每一个人都能拥有轻松舒适的健康生活

  5. 已经4个月没水文章了你的心不会痛吗@(呵呵)

    1. @萌新我的心已经麻木了
      我以为我会哭 但是我没有@(真棒)