提示冒泡

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

这两个图标大家都很熟,可能都知道是什么,但如果换成别的你又是否认识呢,一个一个点击来试很麻烦,特别是网络不好的时候
在这里插入图片描述
这样是不是很清楚的知道了呢
在这里插入图片描述

现在就来用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');
});
})

点击了删除图标,提示冒泡没用去掉,有一些页面刷新了也会每有
在这里插入图片描述
加了代码后,点击后直接把提示冒泡给隐藏掉了

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值