JS中使用react-tooltip插件实现鼠标悬浮显示框
前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结
先看效果(为了方便参考,用的是原始样式):
文档参考地址:
https://www.npmjs.com/package/react-tooltip
1, 首先在配置文件加上引用
2, 然后在页面内引入:
3, react-tooltip的使用非常方便, 在需要鼠标悬停显示的标签上加上data-tip和data-html属性
比如我希望鼠标悬停在某个图标时展示提示框,代码如下:
data-tip属性是悬浮框内的文字,可以使用HTML标签形式.我的悬浮框内容就是定义的HTML片段:
<p>具体支付方式说明:</p>
<p>1.动态客户扫商户: 商户生成付款二维码,顾客用相应的钱包付款</p>
<p>2.动态商户扫顾客: 顾客出示付款二维码,商户扫码收款</p>
<p>3.静态客户输入金额: 顾客扫商户的静态二维码,输入付款金额,进行付款</p>
<p>4.静态商户输入金额: 商户输入金额,顾客扫商户的静态二维码进行付款</p>
data-place属性是显示位置,我设置的是在下方显示
data-type属性是显示的样式
data-class是自定义的样式名称
如果要自己定义悬浮框样式,可以在自定义的样式内加入权重覆盖原有样式,比如:
最终效果:
4, 更多插件属性和函数请参考文档:
https://www.npmjs.com/package/react-tooltip
总结
以上所述是小编给大家介绍的JS中使用react-tooltip插件实现鼠标悬浮显示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
- js实现div跟谁鼠标悬浮移动显示
- BootStrap使用popover插件实现鼠标经过显示并保持显示框
- BootStrap使用popover插件实现鼠标经过显示并保持显示框
- jQuery使用插件dotdotdot.js实现段落溢出显示省略号
- 使用js实现显示鼠标坐标.
- 一个图片轮换显示的实现,使用DIV+JS,支持Firefox,IE,Safiri
- JS实现鼠标移上图片显示、大图显示
- js实现鼠标的移入移出控制图片的明暗显示
- 使用JS实现倒计时(在页面上动态的显示)
- Arcgis for Js之鼠标经过显示对象名的实现
- Winform中ListView鼠标移动使用toolTip显示信息
- 使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- js实现鼠标切换a标签时更换显示的图片
- js实现的鼠标放上和移开显示不同图片和文字,样式比较好看
- 鼠标悬浮停留三秒后自动显示大图js代码
- JS+CSS实现感应鼠标渐变显示DIV层的方法
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- 使用JS实现鼠标滚轮事件
- 用WPF实现在LISTVIEW中的鼠标悬停TOOLTIP显示