1. 程式人生 > >Bootstrap實戰(第二彈:tooltip的基本使用)

Bootstrap實戰(第二彈:tooltip的基本使用)

在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>

效果則為:
這裡寫圖片描述