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

 更新时间:2019-05-16 00:00:21   作者:佚名   我要评论(0)

前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结
先看效果(为了方便参考,用的是原始样式):

文档参考地址:
https

前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了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插件实现鼠标悬浮显示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • Vue.js鼠标悬浮更换图片功能
  • 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
  • js实现鼠标悬浮给图片加边框的方法
  • js鼠标悬浮出现遮罩层的方法
  • js制作的鼠标悬浮时产生的下拉框效果
  • javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)

相关文章

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

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

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https
    2019-05-16
  • 详解Python下载图片并保存本地的两种方式

    详解Python下载图片并保存本地的两种方式

    一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url="https://tim
    2019-05-16
  • SpringBoot整合MybatisPlus的简单教程实现(简单整合)

    SpringBoot整合MybatisPlus的简单教程实现(简单整合)

    最近在研究springboot,顺便就会看看数据库连接这一块的知识 ,所以当我发现有通用Mapper和MybatisPlus这两款网络上比较火的简化mybatis开发的优秀软件之后。
    2019-05-16
  • MongoDB分片集群部署详解

    MongoDB分片集群部署详解

    一、环境说明 1、我们prod环境MongoDB的集群架构是做的分片集群的部署,但是目前我们没有分片,即所有数据都在一个分片上,后期如果数量大,需要分配,集群随
    2019-05-16
  • python3 property装饰器实现原理与用法示例

    python3 property装饰器实现原理与用法示例

    本文实例讲述了python3 property装饰器实现原理与用法。分享给大家供大家参考,具体如下: 学习python的同学,慢慢的都会接触到装饰器,装饰器在python里是功
    2019-05-16
  • Android不显示开机向导和开机气泡问题

    Android不显示开机向导和开机气泡问题

    修改好的代码下载地址: https://github.com/Vico-H/Launcher &#8226;不显示开机向导 --------------------------------------------------------------------
    2019-05-12
  • 如何让PHP编码更加好看利于阅读

    如何让PHP编码更加好看利于阅读

    写出优秀的程序代码是一门艺术,要想如此,就必须在一开始就养成良好的编程习惯。良好的编程习惯不仅有助于项目初期的设计(如模块化),还可以使你编写的代码
    2019-05-12
  • mysql存数组的实例代码和方法

    mysql存数组的实例代码和方法

    在很多的情况下,在编写存储过程中往往会用到数组,但是mysql中存储过程传入参数并没有可以直接传入数组的方法。在这种情况下我们只能退而求之或者说换个方式
    2019-05-12
  • mysql删除关联表的实操方法

    mysql删除关联表的实操方法

    mysql数据库中,表与表之间进行关联之后,就不可随意的进行删除操作,否则会影响所有关联表之间的结构,那么如何安全的删除关联表呢,让我们来了解一下。 删除
    2019-05-12
  • PHP使用Redis实现Session共享的实现示例

    PHP使用Redis实现Session共享的实现示例

    前言 小型web服务, session数据基本是保存在本地(更多是本地磁盘文件), 但是当部署多台服务, 且需要共享session, 确保每个服务都能共享到同一份session数据
    2019-05-12

最新评论