JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框
前段時(shí)間遇到的一個(gè)需求,要求鼠標(biāo)懸停顯示使用描述, 用到了react-tooltip插件,今天寫一個(gè)總結(jié)
先看效果(為了方便參考,用的是原始樣式):
文檔參考地址:
https://www.npmjs.com/package/react-tooltip
1, 首先在配置文件加上引用
2, 然后在頁(yè)面內(nèi)引入:
3, react-tooltip的使用非常方便, 在需要鼠標(biāo)懸停顯示的標(biāo)簽上加上data-tip和data-html屬性
比如我希望鼠標(biāo)懸停在某個(gè)圖標(biāo)時(shí)展示提示框,代碼如下:
data-tip屬性是懸浮框內(nèi)的文字,可以使用HTML標(biāo)簽形式.我的懸浮框內(nèi)容就是定義的HTML片段:
<p>具體支付方式說明:</p>
<p>1.動(dòng)態(tài)客戶掃商戶: 商戶生成付款二維碼，顧客用相應(yīng)的錢包付款</p>
<p>2.動(dòng)態(tài)商戶掃顧客: 顧客出示付款二維碼，商戶掃碼收款</p>
<p>3.靜態(tài)客戶輸入金額: 顧客掃商戶的靜態(tài)二維碼，輸入付款金額，進(jìn)行付款</p>
<p>4.靜態(tài)商戶輸入金額: 商戶輸入金額，顧客掃商戶的靜態(tài)二維碼進(jìn)行付款</p>
data-place屬性是顯示位置,我設(shè)置的是在下方顯示
data-type屬性是顯示的樣式
data-class是自定義的樣式名稱
如果要自己定義懸浮框樣式,可以在自定義的樣式內(nèi)加入權(quán)重覆蓋原有樣式,比如:
最終效果:
4, 更多插件屬性和函數(shù)請(qǐng)參考文檔:
https://www.npmjs.com/package/react-tooltip
總結(jié)
以上所述是小編給大家介紹的JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
React引入antd-mobile+postcss搭建移動(dòng)端
本文給大家分享React引入antd-mobile+postcss搭建移動(dòng)端的詳細(xì)流程，文末給大家分享我的一些經(jīng)驗(yàn)記錄使用antd-mobile時(shí)發(fā)現(xiàn)我之前配置的postcss失效了，防止大家踩坑，特此把解決方案分享到腳本之家平臺(tái)，需要的朋友參考下吧2021-06-06
解決React報(bào)錯(cuò)Property value does not exist&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)Property value does not exist on type HTMLElement解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Objects are not valid as a Rea
這篇文章主要為大家介紹了Objects are not valid as a React child報(bào)錯(cuò)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼
本篇文章主要介紹了ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
本文帶領(lǐng)大家一起探討前端框架react，涉及到前端框架react相關(guān)知識(shí)，對(duì)前端框架react相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
本篇文章主要介紹了在React 組件中使用Echarts的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
React生命周期方法之componentDidMount的使用
這篇文章主要介紹了React生命周期方法之componentDidMount的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React如何實(shí)現(xiàn)視頻旋轉(zhuǎn)縮放
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)視頻旋轉(zhuǎn)縮放功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11