关于【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()，理论上是不会影响到其余的。