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

先看效果(为了方便参考,用的是原始样式):

文档参考地址:

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

1, 首先在配置文件加上引用

2, 然后在页面内引入:

3, react-tooltip的使用非常方便, 在需要鼠标悬停显示的标签上加上data-tip和data-html属性

比如我希望鼠标悬停在某个图标时展示提示框,代码如下:

data-tip属性是悬浮框内的文字,可以使用HTML标签形式.我的悬浮框内容就是定义的HTML片段:

<p style="text-align:left;font-size:14px;">具体支付方式说明:</p><p style="text-align:left;font-size:14px;">1.动态客户扫商户: 商户生成付款二维码,顾客用相应的钱包付款</p><p style="text-align:left;font-size:14px;">2.动态商户扫顾客: 顾客出示付款二维码,商户扫码收款</p><p style="text-align:left;font-size:14px;">3.静态客户输入金额: 顾客扫商户的静态二维码,输入付款金额,进行付款</p><p style="text-align:left;font-size:14px;">4.静态商户输入金额: 商户输入金额,顾客扫商户的静态二维码进行付款</p>

data-place属性是显示位置,我设置的是在下方显示

data-type属性是显示的样式

data-class是自定义的样式名称

如果要自己定义悬浮框样式,可以在自定义的样式内加入权重覆盖原有样式,比如:

最终效果:

 4, 更多插件属性和函数请参考文档: 

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

使用react-tooltip实现鼠标悬浮显示框详细记录的更多相关文章

  1. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  2. Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题

    场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...

  3. datagrid 列鼠标悬浮显示全部信息

    首次发表随笔,且是java新手,求不黑,可能在高手眼里好笑,嘿嘿1,样式设置超过字数限制显示省略号:<style type="text/css"> .datagrid- ...

  4. bootstrap-table 内容超出鼠标悬浮显示全部

    .table th, .table td { text-align: center; vertical-align: middle !important; } table { width: 100px ...

  5. div居中鼠标悬浮显示下拉列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS实现鼠标悬浮,显示内容

    其实就是增加title属性

  7. HTML鼠标悬浮显示隐藏 JS方法

    CSS样式表: @charset "utf-8"; /* CSS Document */ .a { width:80px; height:40px; top:200px; left ...

  8. ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示

    场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...

  9. asp.net gridview 鼠标悬浮提示信息

    使用场景: gridview绑定数据,某列数据太多,故超过一定字符,隐藏起来,同时鼠标移到指定列显示其明细信息: 知识点: 1,oderListTbl_DataBound事件中,添加,oderList ...

随机推荐

  1. UE4物理模块(三)---碰撞查询(下)SAP/MBP/BVH算法简介

    在上一文中介绍了碰撞查询的配置方法: Jerry:UE4物理模块(三)---碰撞查询(上)​zhuanlan.zhihu.com 本篇介绍下UE4的各种零大小的射线检测,以及非零大小(带体积)的射线检 ...

  2. 使用mybatis的延迟加载

    在某些情况下我们需要使用延迟加载技术来提高我们程序查询的性能,通过减少与数据库的连接操作,做到按需加载,这样达到提高程序性能的目的. 首先需要在全局配置文件(SqlMapConfig.xml)中配置全 ...

  3. Liferay 7:portlet name

    总结自: https://web.liferay.com/zh/web/user.26526/blog/-/blogs/proper-portlet-name-for-your-portlet-com ...

  4. 【Codeforces Round #430 (Div. 2) C】Ilya And The Tree

    [链接]点击打开链接 [题意] 给你一棵n个点的树,每个点的美丽值定义为根节点到这个点的路径上的所有权值的gcd. 现在,假设对于每一个点,在计算美丽值的时候,你可以将某一个点的权值置为0的话. 问你 ...

  5. GDOI模拟4.11~4.13总结

    总体情况 省选前的第一场模拟,就连续三天垫底滚粗了. 三天下来,只做了第一天的签到题,然后再做了一些水题的暴力,还不得分. 三天分数:100/400+40/400+90/400=230/1200,得了 ...

  6. Linux硬链接和软连接

    硬链接(hard link): A是B的硬链接(A和B都是文件名),则A的目录项中的inode节点号与B的目录项中的inode节点号相同,即一个inode节点对应两个不同的文件名,两个文件名指向同一个 ...

  7. js读取解析JSON数据(转)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  8. php实现图片以base64显示的方法达到效果

    目前Data URI scheme支持的类型有: data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTM ...

  9. 多云混合云之多集群统一管理:基于阿里云ACK统一纳管多个不同Kubernetes集群

    目前阿里云云原生产品家族已经支持多集群管理功能,允许使用阿里云容器服务Kubernetes(简称ACK)控制台或kubectl命令接入.统一纳管其他公有云.客户IDC自建K8s集群,集中管理部署K8s ...

  10. shell学习(23)- diff和patch

    diff命令可以生成两个文件之间的差异对比. (1) 先创建下列用于演示的文件.文件 1:version1.txt this is the original text line2 line3 line ...