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

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

相关文章

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

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

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • Router添加路由拦截方法讲解

    Router添加路由拦截方法讲解

    在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截
    2023-03-03
  • 使用Ant Design Anchor组件的一个坑及解决

    使用Ant Design Anchor组件的一个坑及解决

    这篇文章主要介绍了使用Ant Design Anchor组件的一个坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • React生命周期方法之componentDidMount的使用

    React生命周期方法之componentDidMount的使用

    这篇文章主要介绍了React生命周期方法之componentDidMount的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • react国际化react-intl的使用

    react国际化react-intl的使用

    这篇文章主要介绍了react国际化react-intl的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Remix 路由模块输出对象handle函数

    Remix 路由模块输出对象handle函数

    这篇文章主要为大家介绍了Remix 路由模块输出对象handle函数使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 解决React报错Expected `onClick` listener to be a function

    解决React报错Expected `onClick` listener to be a function

    这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React源码分析之useCallback与useMemo及useContext详解

    React源码分析之useCallback与useMemo及useContext详解

    这篇文章主要介绍了React useCallback与useMemo及useContext源码分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • React 性能优化之非必要的渲染问题解决

    React 性能优化之非必要的渲染问题解决

    本文主要介绍了React 性能优化之非必要的渲染问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 深入解析React Hooks 闭包陷阱

    深入解析React Hooks 闭包陷阱

    这篇文章主要为大家介绍了React Hooks闭包陷阱的深入探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论