前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了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. Ubuntu上更换163源 - Mars Loo的博客

    转载*请注明原始出处:http://blog.csdn.net/a464057216/article/details/50865895 先备份源/etc/apt/sources.list为source ...

  2. 说说a标签的onclick和href

    在平时我们一般会在列表中的最后一列给加上操作功能,一般的操作功能是修改和删除,这个操作我们可以通过a标签来实现其功能. <a class="pn-opt" href=&quo ...

  3. loadrunner11录制为空的解决办法（win7+chrome最新版本）

    参考:https://www.cnblogs.com/zhang-zhi/archive/2018/09/10/9622605.html loadrunner11在win7中,使用chrome浏览器的 ...

  4. Sql基本知识回顾

    一. SQL 基本语句 SQL 分类: DDL —数据定义语言 (Create , Alter , Drop , DECLARE) DML —数据操纵语言 (Select , Delete , Upd ...

  5. UML时序图(Sequence Diagram)学习笔记

    什么是时序图时序图(Sequence Diagram),又名序列图.循序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作. 让我们来看一看visio2016对时序 ...

  6. git gc干了啥

    前几天在写升级项目的时候发现./git/objects/pack/下的idx和pack文件是只读的,用java在windows下删除会抛异常,然后把只读属性改掉就好了. 于是就想弄清楚这两个文件的作用 ...

  7. Eclipse Jobs 和后台进程

    Eclipse后台进程 1.主线程(Main thread) 一个Eclipse客户端只能跑一个进程,但却可以创建很多线程. 在Eclipse框架中,会用一个单线程去运行所有的代码指令,这个线程执行客 ...

  8. ajax嵌套陷阱

    ajax嵌套陷阱 $('.ajaxupd').click(function () { $('.shadow1').show(); $('.update').show(); var tds=$(this ...

  9. github中markdown语言的使用规则

    开始使用github就接触了markdown,确实如它的宗旨所言"易读易写",语法简洁明了,功能比纯文本更强,是一种非常适用于网络的书写语言.并且一大优点是兼容HTML,只要不在m ...

  10. iOS 9适配

    iOS 9系统策略更新,请开发者注意升级 近期苹果公司iOS 9系统策略更新,限制了http协议的访问,此外应用需要在“Info.plist”中将要使用的URL Schemes列为白名单,才可正常检查 ...