365bet官方网站 > bet365首页 > 关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法

关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法
2020-03-23 19:50

The man who removes a mountain begins by carrying away small stones.

先说下遇到这个问题的背景吧。

William Faulkner, Novelist「移开山头的人以搬开小石头开始。」 威廉福克纳 (小说家)

就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这样类似的字样,然后点击后,把这个div作remove()这样的删除操作。

remove (v.) 移开。例:Please remove these books from the library. (请把这些书由图书馆移走。)

然后,问题来了,因为这个div被remove()了,导致生成的tooltip对应的 × 图标也被remove(),因为找不到,所以对应的mouseout(可能是mouseleave事件,参考了一下bootstrap的源码,没找出头绪,猜测是这两个的其中一个)事件就没法触发,导致tooltip工具提示一直在那里,出bug了。

 

文字不多讲,上图比较直观。

先把代码附上:

【代码部分】(里面的bootstrap文件和js用的本地的,有需要自己尝试运行的到时候需要改动一下):

<!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">

        </a>
        <a id="test" href="javascript:;" data-toggle="tooltip" title="点击移除" data-placement="top" data-container="body">

        </a>
    </div>
    <script>
        $("[data-toggle='tooltip']").tooltip();

        $("#test").on("click",function(){
            var $this = $(this);
            $this.remove();
            $(".tooltip.fade.top.in").remove();//这行代码是我个人用来解决这个问题而添加的
        })
    </script>
</body>
</html>

 

火狐中,页面效果和对应的代码(好像和上面附上的代码重了,不过比较直观)

图片 1

 

鼠标划过对应的图标(已经添加了tooltip,用了bootstrap框架提供的样式和js),同时留意一下tooltip所对应div的id

图片 2

 

光标移开后,再聚焦到对应的×图标上,对比一下id,发现id变了

这里,顺便说一下,原本我是打算去看bootstrap的源码,看看他在tooltip这块的源码怎么写的,好从根源上解决问题。

后来看了一部分后,放弃了,对我现在的半吊子水平来说,压力有点大。

但是至少从这个来说,生成的tooltip,id是随机的,而且tooltip的隐藏,并不是“display:none”的隐藏,应该是“remove()”的隐藏。

PS:我个人的理解,不知道对不对,希望来大神指导一下。

图片 3