文章参考
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、在页面加载完之后执行初始化方法
$(function(){
$('[data-toggle="popover"]').popover();
});
选项
有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：
选项名称 类型/默认值 Data 属性名称 描述
|
|
animation
|
boolean
默认值：true
|
data-animation
|
向工具提示应用 CSS 褪色过渡效果。
|
|
html
|
boolean
默认值：false
|
data-html
|
向工具提示插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
|
|
placement
|
string|function
默认值：top
|
data-placement
|
规定如何定位工具提示（即 top|bottom|left|right|auto）。
当指定为
auto
时，会动态调整工具提示。例如，如果 placement 是 "auto left"，工具提示将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
|
|
selector
|
string
默认值：false
|
data-selector
|
如果提供了一个选择器，工具提示对象将被委派到指定的目标。
|
|
title
|
string | function
默认值：''
|
data-title
|
如果未指定
title
属性，则 title 选项是默认的 title 值。
|
|
trigger
|
string
默认值：'hover focus'
|
data-trigger
|
定义如何触发工具提示：
click| hover | focus | manual
。您可以传递多个触发器，每个触发器之间用空格分隔。
|
|
content
|
string | function
默认值：''
|
data-content
|
如果未指定
data-content
属性，则使用默认的 content 值。
|
|
delay
|
number | object
默认值：0
|
data-delay
|
延迟显示和隐藏工具提示的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
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 href="http://www.baidu.com"><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 href="http://www.baidu.com"><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 href="http://www.baidu.com"><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 href="http://www.baidu.com"><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 href="http://www.baidu.com"><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>',
//触发事件是点击，还有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);
}
显示效果如图
下面这段代码是从网上找的，觉得比较经典，可以借鉴
<!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>