關于【bootstrap】中，【tooltip】的不算bug的bug的個人看法_html/css_WEB-ITnose

來源：懂視網責編：小采時間：2020-11-27 16:17:37

關于【bootstrap】中，【tooltip】的不算bug的bug的個人看法_html/css_WEB-ITnose

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

推薦度：

點擊下載本文 文檔為doc格式

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

先說下遇到這個問題的背景吧。

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

然后，問題來了，因為這個div被remove()了，導致生成的tooltip對應的 × 圖標也被remove()，因為找不到，所以對應的mouseout（可能是mouseleave事件，參考了一下bootstrap的源碼，沒找出頭緒，猜測是這兩個的其中一個）事件就沒法觸發，導致tooltip工具提示一直在那里，出bug了。

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

先把代碼附上：

【代碼部分】（里面的bootstrap文件和js用的本地的，有需要自己嘗試運行的到時候需要改動一下）：

test

火狐中，頁面效果和對應的代碼（好像和上面附上的代碼重了，不過比較直觀）

鼠標劃過對應的圖標（已經添加了tooltip，用了bootstrap框架提供的樣式和js），同時留意一下tooltip所對應div的id

光標移開后，再聚焦到對應的×圖標上，對比一下id，發現id變了

這里，順便說一下，原本我是打算去看bootstrap的源碼，看看他在tooltip這塊的源碼怎么寫的，好從根源上解決問題。

后來看了一部分后，放棄了，對我現在的半吊子水平來說，壓力有點大。

但是至少從這個來說，生成的tooltip，id是隨機的，而且tooltip的隱藏，并不是“display:none”的隱藏，應該是“remove()”的隱藏。

PS：我個人的理解，不知道對不對，希望來大神指導一下。

重現一下bug吧，下面上圖。