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 Tools tab(幻灯片)
Jul 14 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 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
初品cakephp 入门基础
2012/02/16 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python如何快速实现分布式任务
2017/07/06 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python之文件读取一行一行的方法
2018/07/12 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python中new方法的详解
2019/01/15 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python程序输出无内容的解决方式
2020/04/09 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
求职简历推荐信范文
2013/12/02 职场文书
工作交流会欢迎词
2014/01/12 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
公司放假通知范文
2015/04/14 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
大学生军训感言
2015/08/01 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS