關(guān)于【bootstrap】中，【tooltip】的不算bug的bug的個(gè)人看法_html/css_WEB-ITnose

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 16:17:37

關(guān)于【bootstrap】中，【tooltip】的不算bug的bug的個(gè)人看法_html/css_WEB-ITnose

關(guān)于【bootstrap】中，【tooltip】的不算bug的bug的個(gè)人看法_html/css_WEB-ITnose:先說下遇到這個(gè)問題的背景吧。就是在頁面中有個(gè)div，這個(gè)div右上角（或者其他位置）有個(gè) × 的圖標(biāo)（這個(gè)圖標(biāo)添加tooltip工具提示），光標(biāo)移到這個(gè)圖標(biāo)時(shí)，觸發(fā)tooltip，提示點(diǎn)擊移除這樣類似的字樣，然后點(diǎn)擊后，把這個(gè)div作remove()這

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀關(guān)于【bootstrap】中，【tooltip】的不算bug的bug的個(gè)人看法_html/css_WEB-ITnose:先說下遇到這個(gè)問題的背景吧。就是在頁面中有個(gè)div，這個(gè)div右上角（或者其他位置）有個(gè) × 的圖標(biāo)（這個(gè)圖標(biāo)添加tooltip工具提示），光標(biāo)移到這個(gè)圖標(biāo)時(shí)，觸發(fā)tooltip，提示點(diǎn)擊移除這樣類似的字樣，然后點(diǎn)擊后，把這個(gè)div作remove()這

先說下遇到這個(gè)問題的背景吧。

就是在頁面中有個(gè)div，這個(gè)div右上角（或者其他位置）有個(gè) × 的圖標(biāo)（這個(gè)圖標(biāo)添加tooltip工具提示），光標(biāo)移到這個(gè)圖標(biāo)時(shí)，觸發(fā)tooltip，提示“點(diǎn)擊移除”這樣類似的字樣，然后點(diǎn)擊后，把這個(gè)div作remove()這樣的刪除操作。

然后，問題來了，因?yàn)檫@個(gè)div被remove()了，導(dǎo)致生成的tooltip對應(yīng)的 × 圖標(biāo)也被remove()，因?yàn)檎也坏剑詫?yīng)的mouseout（可能是mouseleave事件，參考了一下bootstrap的源碼，沒找出頭緒，猜測是這兩個(gè)的其中一個(gè)）事件就沒法觸發(fā)，導(dǎo)致tooltip工具提示一直在那里，出bug了。

文字不多講，上圖比較直觀。

先把代碼附上：

【代碼部分】（里面的bootstrap文件和js用的本地的，有需要自己嘗試運(yùn)行的到時(shí)候需要改動(dòng)一下）：

 test   火狐中，頁面效果和對應(yīng)的代碼（好像和上面附上的代碼重了，不過比較直觀）
 鼠標(biāo)劃過對應(yīng)的圖標(biāo)（已經(jīng)添加了tooltip，用了bootstrap框架提供的樣式和js），同時(shí)留意一下tooltip所對應(yīng)div的id
 光標(biāo)移開后，再聚焦到對應(yīng)的×圖標(biāo)上，對比一下id，發(fā)現(xiàn)id變了
 這里，順便說一下，原本我是打算去看bootstrap的源碼，看看他在tooltip這塊的源碼怎么寫的，好從根源上解決問題。
 后來看了一部分后，放棄了，對我現(xiàn)在的半吊子水平來說，壓力有點(diǎn)大。
 但是至少從這個(gè)來說，生成的tooltip，id是隨機(jī)的，而且tooltip的隱藏，并不是“display:none”的隱藏，應(yīng)該是“remove()”的隱藏。
 PS：我個(gè)人的理解，不知道對不對，希望來大神指導(dǎo)一下。
 重現(xiàn)一下bug吧，下面上圖。
 下面把那行代碼的注釋取消，用我自己的方法試一下。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com