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插件实现鼠标悬浮显示框,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧2021-06-06
解决React报错Property value does not exist&n
这篇文章主要为大家介绍了React报错Property value does not exist on type HTMLElement解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
Objects are not valid as a Rea
这篇文章主要为大家介绍了Objects are not valid as a React child报错解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
ReactNative页面跳转Navigator实现的示例代码
本篇文章主要介绍了ReactNative页面跳转Navigator实现的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
本文带领大家一起探讨前端框架react，涉及到前端框架react相关知识，对前端框架react相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了react循环数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
React生命周期方法之componentDidMount的使用
这篇文章主要介绍了React生命周期方法之componentDidMount的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了关于React动态修改元素样式的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了React如何实现视频旋转缩放功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
最新评论