Tooltip提示

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右</button>

<!-- 一劳永逸，全局触发 -->
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

运行一下

Tooltip提示 - Options参数设置

有两种方式来进行参数设置：

• 利用data-加参数名的形式构建该元素的自定义属性，比如data-trigger=""
• 在JavaScript中使用$('#example').tooltip(options)方式

常用的Options有：

参数名	数据类型	默认值	说明
animation	布尔型	true	是否应用淡入淡出的动画效果
container	字符串或布尔型	false
delay	数字或者类字典型对象	0	显示或隐藏tooltip提示的延时时长，单位为毫秒；也可以对隐藏和显示的延时时长进行分别设置，例如取值{"show":1000, "hide":200}
html	布尔型	false	提示内容是否可以是html内容，false就代表是普通文本，推荐使用false，不建议在tooltip提示中插入html内容
placement	字符串或函数	"top"	tooltip提示在哪个方向上弹出，常用取值有top/bottom/left/right
selector	字符串或布尔型	false
template	字符串	'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
title	字符串或函数	""
trigger	字符串	"hover focus"	tooltip提示的触发事件，常用的事件有 click/hover/focus/manual，不同的事件中可以组合，但是manual只能单独使用
viewport	字符串或Object对象或者函数	{ selector: 'body', padding: 0 }

Tooltip提示 - JavaScript常用方法

$("#example").tooltip(option)

option命令	说明
hide	隐藏tooltip提示
show	显示tooltip提示
toggle	切换tooltip提示的隐藏和显示状态
destroy	销毁当前tooltip提示组件

示例：文档加载完毕后，自动显示tooltip

$('#example').tooltip( "show" );

运行一下

Tooltip提示 - 事件

事件	说明
show.bs.tooltip	一旦触发tooltip提示的show动作（显示）则触发该事件
shown.bs.tooltip	触发tooltip提示的show动作（显示），且tooltip提示已经显示完毕，则触发该事件
hide.bs.tooltip	一旦触发tooltip提示的hide动作（隐藏）则触发该事件
hidden.bs.tooltip	触发tooltip提示hide动作（隐藏），且tooltip提示已经隐藏完毕，则触发该事件

示例：当tooltip提示显示完毕后，则触发预设事件（弹出“反清复明”）

$('#example').on('shown.bs.tooltip', function (e) {
   alert( "反清复明" );
});

运行一下