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 13 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
vue中touch和click共存的解决方式
Jul 28 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
用vue设计一个日历表
Dec 03 Vue.js
JavaScript实例 ODO List分析
Jan 22 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
微信分享调用jssdk实例
2017/06/08 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
django实现前后台交互实例
2017/08/07 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
农场厂长岗位职责
2013/12/28 职场文书
顶岗实习接收函
2014/01/09 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
公司中秋节活动方案
2014/02/12 职场文书
公司合作意向书
2014/04/01 职场文书
捐书活动总结
2014/05/04 职场文书
教师教育教学随笔
2015/08/15 职场文书