文章參考?
http://outofmemory.cn/bootstrap/tutorial/bootstrap-tooltip-plugin.html
http://v3.bootcss.com/javascript/#popovers-events
?
操作步驟如下：
1、引用js和css文件
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
?
2、在頁面加載完之后執(zhí)行初始化方法
$(function(){
$('[data-toggle="popover"]').popover();
});
?
選項
有一些選項是通過 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）添加或通過 JavaScript 調(diào)用的。下表列出了這些選項：
選項名稱 類型/默認值 Data 屬性名稱 描述
|
|
animation
|
boolean
默認值：true
|
data-animation
|
向工具提示應(yīng)用 CSS 褪色過渡效果。
|
|
html
|
boolean
默認值：false
|
data-html
|
向工具提示插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內(nèi)容。如果您擔心 XSS 攻擊，請使用 text。
|
|
placement
|
string|function
默認值：top
|
data-placement
|
規(guī)定如何定位工具提示（即 top|bottom|left|right|auto）。
當指定為?
auto
?時，會動態(tài)調(diào)整工具提示。例如，如果 placement 是 "auto left"，工具提示將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
|
|
selector
|
string
默認值：false
|
data-selector
|
如果提供了一個選擇器，工具提示對象將被委派到指定的目標。
|
|
title
|
string | function
默認值：''
|
data-title
|
如果未指定?
title
?屬性，則 title 選項是默認的 title 值。
|
|
trigger
|
string
默認值：'hover focus'
|
data-trigger
|
定義如何觸發(fā)工具提示：
?click| hover | focus | manual
。您可以傳遞多個觸發(fā)器，每個觸發(fā)器之間用空格分隔。
|
|
content
|
string | function
默認值：''
|
data-content
|
如果未指定?
data-content
?屬性，則使用默認的 content 值。
|
|
delay
|
number | object
默認值：0
|
data-delay
|
延遲顯示和隱藏工具提示的毫秒數(shù) - 對 manual 手動觸發(fā)類型不適用。如果提供的是一個數(shù)字，那么延遲將會應(yīng)用于顯示和隱藏。如果提供的是對象，結(jié)構(gòu)如下所示：
delay
:
{
show
:
500
,
hide
:
100
}
|
|
container
|
string | false
默認值：false
|
data-container
|
向指定元素追加工具提示。
實例： container: 'body'
|
?
方法
下面是一些工具提示（Tooltip）插件中有用的方法：
方法 描述 實例
|
|
Options:
?.tooltip(options)
|
向元素集合附加提示工具句柄。
|
$
().
tooltip
(
options
)
|
|
Toggle:
?.tooltip('toggle')
|
切換顯示/隱藏元素的提示工具。
|
$
(
'#element'
).
tooltip
(
'toggle'
)
|
|
Show:
?.tooltip('show')
|
顯示元素的提示工具。
|
$
(
'#element'
).
tooltip
(
'show'
)
|
|
Hide:
?.tooltip('hide')
|
隱藏元素的提示工具。
|
$
(
'#element'
).
tooltip
(
'hide'
)
|
|
Destroy:
?.tooltip('destroy')
|
隱藏并銷毀元素的提示工具。
|
$
(
'#element'
).
tooltip
(
'destroy'
)
|
?
?工作例子
?
<a href="#" class="">
<div class="col-xs-3 bg-sqh-tmp-color sqh-tmp-top text-right sqh_relative">
<span class="icon iconfont sqh-tmp-color" aria-hidden="true" id="sqh_navigate" ></span>
</div>
</a>
$(function () {
$('#sqh_navigate').popover({
/*
彈出提示框的標題
"title":"mytitle",
* */
"content":'<ul class="list-unstyled all_width sqh_line_height_20" style="width: 100px;margin:0px 10px;"><a ><li style="white-space:nowrap; border-bottom:1px solid #d8d8d8" class="text-center"><span class="icon iconfont sqh_color_56 margin_right_10 font_18"></span>首頁</li></a><a ><li style="white-space:nowrap; border-bottom:1px solid #d8d8d8" class="text-center"><span class="icon iconfont sqh_color_56 margin_right_10 font_18"></span>我的</li></a><a ><li style="white-space:nowrap; border-bottom:1px solid #d8d8d8" class="text-center"><span class="icon iconfont sqh_color_56 margin_right_10 font_18"></span>物業(yè)</li></a><a ><li style="white-space:nowrap; border-bottom:1px solid #d8d8d8" class="text-center"><span class="icon iconfont sqh_color_56 margin_right_10 font_18"></span>快遞</li></a><a ><li style="white-space:nowrap;" class="text-center"><span class="icon iconfont sqh_color_56 margin_right_10 font_18"></span>團購</li></a></ul>',
//提示顯示的位置
"placement":"bottom",
"html":true,
//修改默認模板，可以在模板中添加自己的樣式，其中popover、arrow、popover-content這個三個類不能刪除和修改，因為代碼的注入就是依賴著三個類
"template":'<div class="popover sqh_bg_eee clear_border" role="tooltip"><div class="arrow "></div><h3 class="popover-title"></h3><div class="popover-content sqh_popover-content"></div></div>',
//觸發(fā)事件是點擊，還有hover,focus
"trigger" :"click"
}).on("shown.bs.popover",function(){
//將自動生成的位置向左移動5px
var _popover_left_ = 5;
var _arrow_left_ = 10;
$("div.arrow ").css("left",$("div.arrow ").css("left")+_arrow_left_);
$("div.popover ").css("left",parseFloat($("div.popover ").css("left"))-_popover_left_);
});
});
?
?
自己寫了一些CSS樣式，覆蓋了之前默認的顯示
?
/*消除tooltips彈出層左右兩邊的空格*/
.sqh_popover-content{
padding: 0px;
}
.sqh_popover-content ul.list-unstyled{
margin: 0px;
}
.popover.bottom > .arrow::after{
border-bottom-color:#eeeeee;
}
.popover.bottom > .arrow{
border-bottom-color:rgba(0, 0, 0, 0);
}
?
?
?顯示效果如圖
?
?
下面這段代碼是從網(wǎng)上找的，覺得比較經(jīng)典，可以借鑒
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 工具提示（Tooltip）插件方法</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
這是一個 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Tooltip 方法 show
</a>.
這是一個 <a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Tooltip 方法 hide
</a>.
這是一個 <a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Tooltip 方法 destroy
</a>.
這是一個 <a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Tooltip 方法 toggle
</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >
這是一個 <a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Tooltip 方法 options
</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });
});
</script>
<div>
</body>
</html>
?