首先講一講提示框(Tooltip)的使用方法

創(chuàng)新互聯(lián)服務(wù)項目包括象山網(wǎng)站建設(shè)、象山網(wǎng)站制作、象山網(wǎng)頁制作以及象山網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，象山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到象山省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

樣式文件：

LESS版本：對應(yīng)源文件 tooltips.less

 
按鈕做的提示框
 
 提示框居左  
  

 
 提示框在頂部
 

 
 提示框在底部    
 

 
 提示框居右  
 

 
鏈接制作的提示框
 
  提示框居左
 

 
  提示框在頂部
 

 
  提示框在底部
 

 
  提示框居右
 

 
  我是提示框
 

 
  我是提示框2
 
 
 
 

通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設(shè)置提示信息)。
通過 data-placement 自定義屬性來控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。
還有一個最重要的參數(shù)不可缺少，data-toggle=”tooltip”。

需要特別注意的是：

1、如果同時設(shè)置了 data-original-title 和 title 定義提示信息，那么 data-original-title 的優(yōu)先級要高于 title。只有 data-original-title 值為空時，才會取 title 的值做為提示信息的內(nèi)容。

2、Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)。

提示框–其他的自定義屬性

提示框–JS設(shè)置參數(shù)方法

使用過JQuery UI應(yīng)該知道，它里面有一個dialog的彈出框組件，功能也很豐富。與jQuery UI的dialog類似，Bootstrap里面也內(nèi)置了彈出框組件。打開bootstrap 文檔可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是說，只要我們引入了bootstrap的文件，就可以直接使用它的dialog組件，是不是很方便。本篇我們就結(jié)合新增編輯的功能來介紹下bootstrap dialog的使用。廢話不多說，直接看來它如何使用吧。

彈出框（Popover）
不同的是：彈出框除了有標(biāo)題 title 以外還增加了內(nèi)容 content 部分。這個在提示框中是沒有的。
樣式文件：
☑ LESS版本：對應(yīng)的源文件是 popovers.less

猛擊我吧

彈出框–彈出框的結(jié)構(gòu)

彈出框Popover和提示框tooltip相比，就多了一個content內(nèi)容，那么在此使用 data-content 來定義彈出框中的內(nèi)容。同樣可以使用或者標(biāo)簽來制作，
調(diào)用popover的時候，options的參數(shù)與聲明式選擇里以data-開頭的自定義屬性一樣。都可以在options里設(shè)置。

   鼠標(biāo)放上顯示彈出框
 

彈出框–提示框和彈出框的異同

提示框 tooltip 的默認(rèn)觸發(fā)事件是 hover 和 focus，而彈出框 popover 是 click
提示框 tooltip 只有一個內(nèi)容(title)，而彈出框不僅可以設(shè)置標(biāo)題（title）還可以設(shè)置內(nèi)容(content)

提示框tooltip的模板：

彈出框popover的模板：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。