Bootstrap實戰(第二彈:tooltip的基本使用)
阿新 • • 發佈:2019-02-09
在html中引入bootstrap的css和js,然後在需要提示的標籤上,加上:
data-toggle="tooltip" data-placement="bottom" title="12345678901"
然後在JS中加入:
$("[data-toggle='tooltip']").tooltip();
即可。
例如,在<a>
標籤上加上以上程式碼:
<a data-toggle="tooltip" data-placement="bottom" title="12345678901"><i class="fa fa-phone"> </i></a>
效果則為:
但有時我們不光想簡單顯示幾個字,還想要支援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>
效果則為: