AMO全媒体运营
首页 前端设计 Tippy.js 玩转鼠标悬停提示信息

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

网页设计师对 tooltips 鼠标经过提示效果应该不陌生,这种效果虽然可以直接用 css hover 来实现,但是如果想更友好的、更美观的效果,可能就要借助 JS 来实现啦。今天…

网页设计师对 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哦!

以上内容就是“Tippy.js 玩转鼠标悬停提示信息”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想了解更多前端设计的相关内容,可以来AdobeEdu设计联盟官方网站获取。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

2022年 CodePen 最热门的前端代码 Top 100

2022年 CodePen 最热门的前端代码 Top 100

每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用、有的超有创意,有空看看都能给我们带...
优化阅读体验,网站预设字体的CSS最佳写法

优化阅读体验,网站预设字体的CSS最佳写法

英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,...
架构图有哪些?很多程序员都不会画

架构图有哪些?很多程序员都不会画

很多程序员画架构图头疼,不知道画什么、怎么画! 分享、评审、述职、答辩,只要你在程序员这个行业,就几乎离不开要画图。 一...
CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案...
表单密码强度可视化设计

表单密码强度可视化设计

在填写表单密码时,有的会会显示「弱、中、强」的文案来表示你填写的密码强度,这是一种不错的用户体验方式,然而今天我们分享一...

发表回复

返回顶部