關於【bootstrap】中，【tooltip】的不算bug的bug的我的見解

時間 2019-12-04

標籤關於 bootstrap tooltip 不算 bug 我的見解欄目 Bootstarp 简体版

原文原文鏈接

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

就是在頁面中有個div，這個div右上角（或者其餘位置）有個 × 的圖標（這個圖標添加tooltip工具提示），光標移到這個圖標時，觸發tooltip，提示「點擊移除」這樣相似的字樣，而後點擊後，把這個div做remove()這樣的刪除操做。css

而後，問題來了，由於這個div被remove()了，致使生成的tooltip對應的 × 圖標也被remove()，由於找不到，因此對應的mouseout（多是mouseleave事件，參考了一下bootstrap的源碼，沒找出頭緒，猜想是這兩個的其中一個）事件就無法觸發，致使tooltip工具提示一直在那裏，出bug了。html

文字很少講，上圖比較直觀。java

先把代碼附上：jquery

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
    <script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div style="width:70%;margin:50px auto;height:300px;">
        <a id="test01" href="javascript:;" data-toggle="tooltip" title="反饋錯誤" data-placement="top" data-container="body">
            <span  class="fa fa-bug"></span>
        </a>
        <a id="test" href="javascript:;" data-toggle="tooltip" title="點擊移除" data-placement="top" data-container="body">
            <span  class="fa fa-times"></span>
        </a>
    </div>
    <script>
        $("[data-toggle='tooltip']").tooltip();
        
        $("#test").on("click",function(){
            var $this = $(this);
            $this.remove();
            $(".tooltip.fade.top.in").remove();//這行代碼是我我的用來解決這個問題而添加的
        })
    </script>
</body>
</html>

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

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

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

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

後來看了一部分後，放棄了，對我如今的半吊子水平來講，壓力有點大。

可是至少從這個來講，生成的tooltip，id是隨機的，並且tooltip的隱藏，並非「display:none」的隱藏，應該是「remove()」的隱藏。

PS：我我的的理解，不知道對不對，但願來大神指導一下。

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

下面把那行代碼的註釋取消，用我本身的方法試一下。

以上就是用個人方法獲得的最後效果了。

把 × 圖標移除後，鼠標再劃過 bug 圖標，能夠正常顯示tooltip工具提示，至少，現階段看來沒問題，至於截圖，太佔位置了，仍是不上了。

PS：這個方法我和同事提了一下，由於tooltip這塊用的是bootstrap提供的框架，一整套的，就怕改動一下，別的地方出現問題，因此，我這個新人小白就放棄這個方法了，但願大神來指導一下，能有更好的辦法。

【總結】

最後，再額外廢話幾句吧。

剛開始的思路，是經過要刪除的元素，找到對應生成的tooltip，而後把它隱藏的（display:none），後來發現好像找不到。

由於id會一直變（我我的猜測，沒驗證，由於源碼讀起來對我有點壓力，至少他的id應該是隨機生成的，就算是有規則的，我也實在不知道），就像剛開始那兩張截圖提到的，找不到惟一的；若是經過class來找，可能找到的不是惟一的，由於同一個頁面下還有其餘的標籤元素也能使用了tooltip。

後來在本地試了下後，主要是生成的tooltip沒有刪去（之因此不用「隱藏」，正如上面那幾張截圖提到的，並不是toolitip提示display:none，而是直接remove()了該提示）。

而後想了下，每次光標通過添加了tooltip的元素後，好像這個都是從新生成的，對應的，每次光標移除，對應的tooltip都會remove()，

因此想到了這個方法：在對應元素remove()後，找到頁面上的$("div.tooltip.fade.in")，而後remove()，理論上是不會影響到其餘的。

相關文章

相關標籤/搜索

我理解中的

一我的的好天氣

我的實踐出來的

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<