用react-tooltip插件在JS中实现鼠标悬浮显示框

前段时间遇到的一个需求需要鼠标悬停来显示使用描述，使用了react-tooltip插件。今天，写一个总结。

先看效果(为方便参考，使用原样式):

文件参考地址：

https://www.npmjs.com/package/react-tooltip

1、首先添加对配置文件的引用

2，然后在页面中引入：

3.使用react-tooltip非常方便，数据提示和数据html属性被添加到需要通过鼠标悬停来显示的标签中

例如，我想在鼠标悬停在图标上时显示一个提示框。代码如下：

数据提示属性是悬浮框中的文本，可以是HTML标签的形式。我的悬浮框的内容是定义的HTML片段：

p具体付款方式说明：/p

P1。动态客户扫描商家：生成支付二维码，客户用对应的钱包支付/p

P2。动态商户扫描客户：客户出示支付二维码，商户扫码收款/p

P3。静态客户输入金额为：客户扫描商家的静态二维码，输入支付金额，进行支付/p

P4。静态商户输入金额为：客户扫描商户静态二维码进行支付/p

数据位置属性是显示位置，我将其设置为显示在下面

数据类型属性是显示样式

数据类是一个自定义样式名称

如果您想自己定义悬挂框的样式，可以为自定义样式添加权重以覆盖原始样式，例如：

最终效果：

4.更多插件属性和功能请参考文档：

https://www.npmjs.com/package/react-tooltip

摘要

以上就是利用边肖介绍的JS中的react-tooltip插件实现鼠标悬浮显示框，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！