html鼠标悬停显示箭头,Tippy.js 玩转鼠标悬停提示信息

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

3月 2, 2018

Sponsor

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

截图演示

默认：

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

方向：

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

箭头样式：

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

动画：

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

样式：

提示效果还能加样式的哦，你看：

HTML 样式：

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

其它效果

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

使用教程

第1步：引入 JS 插件

...

第2步：HTML 代码

Text

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

tippy('.btn')

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

tippy('.btn', {

placement: 'right',

animation: 'scale',

duration: 1000,

arrow: true

})

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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓名 (必填)

邮件 (必填)

网站

html鼠标悬停显示箭头,Tippy.js 玩转鼠标悬停提示信息相关推荐

html鼠标触发显示悬浮窗,JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...
鼠标连点器，怎么玩转鼠标自动点击？
鼠标连点器是一款非常便捷的工具,可以帮助我们自动进行鼠标点击操作.这种工具尤其适用于一些需要反复点击同一个位置的软件或游戏,在这些情况下手动点击会非常费时费力,而鼠标连点器就能够为我们节省很多宝贵的时 ...
html鼠标悬停显示箭头,CSS 悬停时出现箭头的按钮
CSS 语言: CSSSCSS 确定 * { box-sizing: border box; } .center { position: absolute; top: 50%; left: 50%; ...
php实现鼠标悬停显示下拉菜单,Html中鼠标悬停显示二级菜单的两种方法
Windows Phone 8.1中处理后退键的HardwareButtons.BackPressed事件在WP8中,处理后退键比较简单,重写OnBackKeyPress事件即可.如经常用的双击后退 ...
有限鼠标和无线鼠标有什么区别玩游戏鼠标有线好还是无线好
有线鼠标直接通过USB线与电脑连接,无线鼠标通过一个很小的信号发射器插在电脑上,鼠标就可以用了.无线鼠标没有线,所以活动起来更方便,也更整洁. 玩游戏用有线还是无线这些点很重要看过你就懂了 http: ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
JS文字过长隐藏，鼠标悬停显示
目录原生JS的处理办法 vue下的处理办法原生JS的处理办法此部分转载自链接: js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示. 以下展示最简单的办法,转载的原文还另举了一种onload ...
vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...
html 悬停显示标题,JS实现TITLE悬停长久显示效果完整示例
本文实例讲述了JS实现TITLE悬停长久显示效果.分享给大家供大家参考,具体如下: JS控制TITLE悬停效果 /** * className 类名 * tagname HTML标签名,如div,td ...
鼠标悬停显示滚动条，移出不显示
鼠标悬停显示滚动条,移出不显示代码如下: <!DOCTYPE html> <html lang="en"><head><meta cha ...

html鼠标悬停显示箭头,Tippy.js 玩转鼠标悬停提示信息

html鼠标悬停显示箭头,Tippy.js 玩转鼠标悬停提示信息相关推荐

最新文章

热门文章