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

您可能感兴趣的文章:


  • 本文相关:
  • vue.js鼠标悬浮更换图片功能
  • 基于javascript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
  • js实现鼠标悬浮给图片加边框的方法
  • js鼠标悬浮出现遮罩层的方法
  • js制作的鼠标悬浮时产生的下拉框效果
  • javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
  • js简单正则验证汉字英文及下划线的方法
  • 微信小程序开发之好友列表字母列表跳转对应位置
  • javascript-mozilla和ie中的一个函数直接量的问题
  • js 正则表达式知识汇总
  • javascript文件中引用依赖的js文件的方法
  • 如何写一个通用的javascript效果库!(2/2)
  • js时间戳与日期格式之间转换详解
  • javascript间隔刷新的简单实例
  • 详解javascript基于面向对象之继承
  • js解析xml的实现代码
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved