Bootstrap實(shí)現(xiàn)提示框和彈出框效果
首先講一講提示框(Tooltip) 的使用方法
樣式文件：
LESS版本：對(duì)應(yīng)源文件 tooltips.less
<style id="jsbin-css">
body {
padding: 100px;
}
.btn {
margin: 20px 10px 20px;
}
</style>
</head>
<body>
<h3>按鈕做的提示框</h3>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
data-original-title="提示框居左"
title="">
提示框居左
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="top"
data-original-title="提示框在頂部">
提示框在頂部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="提示框在底部">
提示框在底部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="right"
data-original-title="提示框居右">
提示框居右
</button>
<h3>鏈接制作的提示框</h3>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="left"
title="提示框居左">
提示框居左
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="top"
title="提示框在頂部">
提示框在頂部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="bottom"
title="提示框在底部">
提示框在底部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="right"
title="提示框在居右">
提示框居右
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip">
我是提示框
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip2">
我是提示框2
</a>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
//添加提示框的事件
$('[data-toggle="tooltip"]').tooltip();
//能過(guò)js來(lái)更改提示框
$('#myTooltip').tooltip({
title:"我是一個(gè)提示框，我在頂部出現(xiàn)",
placement:'top'
});
});
</script>
通過(guò) title 屬性的值來(lái)定義提示信息(也可以使用自定義屬性 data-original-title 來(lái)設(shè)置提示信息)。
通過(guò) data-placement 自定義屬性來(lái)控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個(gè)值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。
還有一個(gè)最重要的參數(shù)不可缺少，data-toggle=”tooltip”。
需要特別注意的是：
1、如果同時(shí)設(shè)置了 data-original-title 和 title 定義提示信息，那么 data-original-title 的優(yōu)先級(jí)要高于 title。只有 data-original-title 值為空時(shí)，才會(huì)取 title 的值做為提示信息的內(nèi)容。
2、Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過(guò)自定義的屬性 data- 來(lái)觸發(fā)。必須得依賴(lài)于JavaScript的代碼觸發(fā)。
提示框–其他的自定義屬性
提示框–JS設(shè)置參數(shù)方法
使用過(guò)JQuery UI應(yīng)該知道，它里面有一個(gè)dialog的彈出框組件，功能也很豐富。與jQuery UI的dialog類(lèi)似，Bootstrap里面也內(nèi)置了彈出框組件。打開(kāi)bootstrap 文檔可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是說(shuō)，只要我們引入了bootstrap的文件，就可以直接使用它的dialog組件，是不是很方便。本篇我們就結(jié)合新增編輯的功能來(lái)介紹下bootstrap dialog的使用。廢話(huà)不多說(shuō)，直接看來(lái)它如何使用吧。
彈出框（Popover）
不同的是：彈出框除了有標(biāo)題 title 以外還增加了內(nèi)容 content 部分。這個(gè)在提示框中是沒(méi)有的。
樣式文件：
☑ LESS版本：對(duì)應(yīng)的源文件是 popovers.less
<button type="button" class="btn btn-default" id="myPopover">猛擊我吧</button>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myPopover').popover({
title:"我是彈出框的標(biāo)題",
content:"我是彈出框的內(nèi)容",
placement:"right"
});
});
</script>
彈出框–彈出框的結(jié)構(gòu)
彈出框Popover和提示框tooltip相比，就多了一個(gè)content內(nèi)容，那么在此使用 data-content 來(lái)定義彈出框中的內(nèi)容。同樣可以使用或者標(biāo)簽來(lái)制作，
調(diào)用popover的時(shí)候，options的參數(shù)與聲明式選擇里以data-開(kāi)頭的自定義屬性一樣。都可以在options里設(shè)置。
<button type="button"
data-toggle="popover"
class="btn btn-default"
id="myPopover">
鼠標(biāo)放上顯示彈出框
</button>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
//通過(guò)js來(lái)定義彈出框
$(function(){
$('#myPopover').popover({
title:"我是彈出框的標(biāo)題",
content:"我是彈出框的內(nèi)容",
placement:"top",
trigger:"hover"
});
});
</script>
彈出框–提示框和彈出框的異同
提示框 tooltip 的默認(rèn)觸發(fā)事件是 hover 和 focus，而彈出框 popover 是 click
提示框 tooltip 只有一個(gè)內(nèi)容(title)，而彈出框不僅可以設(shè)置標(biāo)題（title）還可以設(shè)置內(nèi)容(content)
提示框tooltip的模板：
<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div>
彈出框popover的模板：
<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 在iframe中使bootstrap的模態(tài)框在父頁(yè)面彈出問(wèn)題
- Bootstrap彈出框之自定義懸停框標(biāo)題、內(nèi)容和樣式示例代碼
- Bootstrap的popover（彈出框）2秒后定時(shí)消失的實(shí)現(xiàn)代碼
- 擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框
- Bootstrap實(shí)現(xiàn)帶動(dòng)畫(huà)過(guò)渡的彈出框
- Bootstrap編寫(xiě)一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話(huà)框 非彈窗
- Bootstrap彈出框(modal)垂直居中的問(wèn)題及解決方案詳解
- 關(guān)于Bootstrap彈出框無(wú)法調(diào)用問(wèn)題的解決辦法
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- bootstrap實(shí)現(xiàn)點(diǎn)擊刪除按鈕彈出確認(rèn)框的實(shí)例代碼
相關(guān)文章
這篇文章主要介紹了js 圖片懶加載的實(shí)現(xiàn)，幫助大家更好的優(yōu)化自身網(wǎng)頁(yè)，提高網(wǎng)頁(yè)響應(yīng)速度，感興趣的朋友可以了解下2020-10-10
js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能示例
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組元素遍歷與頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
Sortable.js功能強(qiáng)大的JavaScript 拖拽庫(kù)示例詳解
SortableJS 是一個(gè)強(qiáng)大、靈活且易于使用的 JavaScript 庫(kù),適用于各種類(lèi)型的拖放排序需求,這篇文章主要介紹了Sortable.js功能強(qiáng)大的JavaScript 拖拽庫(kù)示例詳解,需要的朋友可以參考下2025-01-01
window.location.href和window.open窗口跳轉(zhuǎn)區(qū)別解析
這篇文章主要為大家介紹了window.location.href和window.open 跳轉(zhuǎn)區(qū)別解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加，刪除行的方法實(shí)例詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加，刪除行的方法,較為詳細(xì)的分析了javascript操作table表格實(shí)現(xiàn)針對(duì)表格元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-07-07
js新聞滾動(dòng) js如何實(shí)現(xiàn)新聞滾動(dòng)效果
JS實(shí)現(xiàn)新聞滾動(dòng)效果：滾動(dòng)頻率由setTimeout(F,#%18?10:3000)這個(gè)3000來(lái)控制,感興趣的朋友可以了解下哦2013-01-01
bootstrap fileinput實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了bootstrap fileinput實(shí)現(xiàn)文件上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Javascript對(duì)象按照屬性排序方法示例探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
javascript代碼判斷按鈕是否被點(diǎn)擊了在項(xiàng)目中經(jīng)常會(huì)遇到這個(gè)需求，今天小編抽點(diǎn)時(shí)間給大家分享一段代碼關(guān)于javascript判斷按鈕是否被點(diǎn)擊的方法，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
微信小程序?qū)W習(xí)筆記之獲取位置信息操作圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之獲取位置信息操作,結(jié)合實(shí)例形式分析了微信小程序獲取位置信息的原理、步驟及相關(guān)操作注意事項(xiàng),并結(jié)合圖文形式予以說(shuō)明,需要的朋友可以參考下2019-03-03