提示冒泡

很多时候为了页面美观，直接用图标，没有文字说明，看过去都不知道是什么，这时候我们就要想想有什么办法可以做到又美观，又能让别人知道你的图标是什么，这时候就需要用到"提示冒泡"了
只要把鼠标放到图标上，它就会通过文字的形式，通过冒泡方式提示出来，这时你就知道这个图标是什么，这个图标是什么了，不用一个一个打开来试了

这两个图标大家都很熟，可能都知道是什么，但如果换成别的你又是否认识呢，一个一个点击来试很麻烦，特别是网络不好的时候

这样是不是很清楚的知道了呢

现在就来用bootstrap来实现一下"提示冒泡"这个功能
提示冒泡组件依赖于 Popper.js，你要把js文件放在 bootstrap.js之前调用
或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个已经包含了 Popper.js 的脚本

用layui的图标样式，把图标显示出来
data-toggle=“tooltip” ，需要用的插件
data-original-title=“刷新”，提示冒泡的内容

<a href="#" data-toggle="tooltip" data-original-title="删除" class="layui-icon layui-icon-delete mx-2" style="font-size:20px;" id="Remove"></a>
// javascript:window.history.go(0); 刷新
<a href="javascript:window.history.go(0);" data-toggle="tooltip" data-original-title="刷新" class="layui-icon layui-icon-refresh mx-2" style="font-size:20px;"></a>

$(’[data-toggle=“tooltip”]’).tooltip(); 用这句代码启用提示冒泡

$(function () {
//启用冒泡
$('[data-toggle="tooltip"]').tooltip();
})

直接这样还有一点小小的问题，就是你点击了，你需要的东西已经出来了，但是那个提示冒泡还在那里，需要再点击一下才会不见，如果想点了就没有，还需要加一点代码

$(function () {
//启用冒泡
$('[data-toggle="tooltip"]').tooltip();

//点击后，取消冒泡
//删除
$('#Remove').click('hidden.bs.tooltip', function () {
	//选中到id为Remove 的表标签,然后隐藏
$('#Remove').tooltip('hide');
});
})

点击了删除图标，提示冒泡没用去掉，有一些页面刷新了也会每有

加了代码后，点击后直接把提示冒泡给隐藏掉了