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 相关文章推荐
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
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
PHP If Else(elsefi) 语句
2013/04/07 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
深入apache host的配置详解
2013/06/09 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
犀利的js 函数集合
2009/06/11 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
jquery获取radio值实例
2014/10/16 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
vue实现图片上传功能
2020/05/28 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python深度优先算法生成迷宫
2018/01/22 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
numpy 声明空数组详解
2019/12/05 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
南京某公司笔试题
2013/01/27 面试题
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
长城导游词300字
2015/01/30 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
离婚上诉状范文
2015/05/23 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
Python中相见恨晚的技巧
2021/04/13 Python