溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框

發(fā)布時(shí)間：2020-10-10 02:20:04 來源：腳本之家 閱讀：573 作者：CN-無憂 欄目：web開發(fā)

前段時(shí)間遇到的一個(gè)需求,要求鼠標(biāo)懸停顯示使用描述, 用到了react-tooltip插件,今天寫一個(gè)總結(jié)

先看效果(為了方便參考,用的是原始樣式):

JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框

文檔參考地址:

https://www.npmjs.com/package/react-tooltip

1, 首先在配置文件加上引用

JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框

2, 然后在頁(yè)面內(nèi)引入:

JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框

3, react-tooltip的使用非常方便, 在需要鼠標(biāo)懸停顯示的標(biāo)簽上加上data-tip和data-html屬性

比如我希望鼠標(biāo)懸停在某個(gè)圖標(biāo)時(shí)展示提示框,代碼如下:

JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框

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)重覆蓋原有樣式,比如:

JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框

最終效果:

JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框

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)注明出處，謝謝！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手