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.動態(tài)客戶掃商戶: 商戶生成付款二維碼，顧客用相應的錢包付款</p>
<p>2.動態(tài)商戶掃顧客: 顧客出示付款二維碼，商戶掃碼收款</p>
<p>3.靜態(tài)客戶輸入金額: 顧客掃商戶的靜態(tài)二維碼，輸入付款金額，進行付款</p>
<p>4.靜態(tài)商戶輸入金額: 商戶輸入金額，顧客掃商戶的靜態(tài)二維碼進行付款</p>
data-place屬性是顯示位置,我設置的是在下方顯示
data-type屬性是顯示的樣式
data-class是自定義的樣式名稱
如果要自己定義懸浮框樣式,可以在自定義的樣式內加入權重覆蓋原有樣式,比如:
最終效果:
4, 更多插件屬性和函數請參考文檔:
https://www.npmjs.com/package/react-tooltip
總結
以上所述是小編給大家介紹的JS中使用react-tooltip插件實現鼠標懸浮顯示框,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
前段時間遇到的一個需求,要求鼠標懸停顯示使用描述, 用到了react-tooltip插件,今天寫一個總結，感興趣的朋友跟隨小編一起看看吧2019-05-05
在vue項目中使用vue-router做頁面跳轉時，路由的方式有兩種，一種是靜態(tài)路由，另一種是動態(tài)路由。而要實現對路由的控制需要使用vuex和router全局守衛(wèi)進行判斷攔截2023-03-03
這篇文章主要介紹了使用Ant Design Anchor組件的一個坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
React生命周期方法之componentDidMount的使用
這篇文章主要介紹了React生命周期方法之componentDidMount的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了react國際化react-intl的使用,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要為大家介紹了Remix?路由模塊輸出對象handle函數使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
解決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源碼分析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-11-11
本文主要介紹了React 性能優(yōu)化之非必要的渲染問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要為大家介紹了React Hooks閉包陷阱的深入探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05