bootstrap tooltips控件学习

文章参考 

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" >&#xe60b;</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">&#xe62d;</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">&#xe60b;</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">&#xe619;</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">&#xe617;</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">&#xe618;</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>