在html中引入bootstrap的css和js,然后在需要提示的标签上,加上:
data-toggle="tooltip" data-placement="bottom" title="12345678901"
1
然后在JS中加入:
$("[data-toggle='tooltip']").tooltip();
1
即可。
例如,在<a>标签上加上以上代码:
<a data-toggle="tooltip" data-placement="bottom" title="12345678901"><i class="fa fa-phone"></i></a>
1
效果则为:
但有时我们不光想简单显示几个字,还想要支持html样式,如加粗的字,图片等,我们可以在标签上再加上:data-html="true",然后在title属性里就可以写html代码了,如:
<a data-toggle="tooltip" data-placement="bottom"
title="微信二维码:<img src='img.png' style='height:100px'>"
data-html="true"><i class="fa fa-weixin"></i></a>
效果则为: