JS中使用react-tooltip插件实现鼠标悬浮显示框


Posted in Javascript onMay 15, 2019

前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结

先看效果(为了方便参考,用的是原始样式):

JS中使用react-tooltip插件实现鼠标悬浮显示框

文档参考地址:

https://www.npmjs.com/package/react-tooltip

1, 首先在配置文件加上引用

JS中使用react-tooltip插件实现鼠标悬浮显示框

2, 然后在页面内引入:

JS中使用react-tooltip插件实现鼠标悬浮显示框

3, react-tooltip的使用非常方便, 在需要鼠标悬停显示的标签上加上data-tip和data-html属性

比如我希望鼠标悬停在某个图标时展示提示框,代码如下:

JS中使用react-tooltip插件实现鼠标悬浮显示框

data-tip属性是悬浮框内的文字,可以使用HTML标签形式.我的悬浮框内容就是定义的HTML片段:

<p>具体支付方式说明:</p>

<p>1.动态客户扫商户: 商户生成付款二维码,顾客用相应的钱包付款</p>

<p>2.动态商户扫顾客: 顾客出示付款二维码,商户扫码收款</p>

<p>3.静态客户输入金额: 顾客扫商户的静态二维码,输入付款金额,进行付款</p>

<p>4.静态商户输入金额: 商户输入金额,顾客扫商户的静态二维码进行付款</p>

data-place属性是显示位置,我设置的是在下方显示

data-type属性是显示的样式

data-class是自定义的样式名称

如果要自己定义悬浮框样式,可以在自定义的样式内加入权重覆盖原有样式,比如:

JS中使用react-tooltip插件实现鼠标悬浮显示框

最终效果:

JS中使用react-tooltip插件实现鼠标悬浮显示框

4, 更多插件属性和函数请参考文档:

https://www.npmjs.com/package/react-tooltip

总结

以上所述是小编给大家介绍的JS中使用react-tooltip插件实现鼠标悬浮显示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 #Javascript
小程序绑定用户方案优化小结
May 15 #Javascript
pm2发布node配置文件ecosystem.json详解
May 15 #Javascript
JQuery常见节点操作实例分析
May 15 #jQuery
JS算法题之查找数字在数组中的索引位置
May 15 #Javascript
JQuery属性操作与循环用法示例
May 15 #jQuery
前端js中的事件循环eventloop机制详解
May 15 #Javascript
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
下拉框select的绑定示例
2014/09/04 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python中学习K-Means和图片压缩
2017/11/20 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python分布式编程实现过程解析
2019/11/08 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
Python用户自定义异常的实现
2020/12/25 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
开放系统互连参考模型
2016/06/29 面试题
旷课检讨书2000字
2014/01/14 职场文书
档案保密承诺书
2014/06/03 职场文书
班训口号大全
2014/06/18 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
早安问候语大全
2015/11/10 职场文书