Bootstrap JavaScript插件：工具提示（tooltip.js）

作者:WangMin
格言:努力做好自己喜欢的每一件事

Bootstrap 提示工具（Tooltip）插件工具可以通过鼠标移动到选定的特定的元素上时，显示出相关的提示语。当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。
静态样式：

用法

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。有以下两种方式添加提示工具（tooltip）：

• 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加data-toggle="tooltip"即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<a href="#" data-toggle="tooltip" title="This is the tooltip">Tooltip Example</a>
<a href="#" data-toggle="tooltip" data-original-title="This is the tooltip">Tooltip Example</a>

• 通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

  $('#identifier').tooltip(options)
  

  由于性能的原因，不能通过 data 属性直接激活工具提示插件，需要通过Javascript代码手动初始化它。只有初始化之后，将鼠标移动到链接上，才会显示相关的提示信息。否则，是不会显示任何提示信息的。

$(function () { $("[data-toggle='tooltip']").tooltip(); });

案例如下：

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

1. 不要尝试显示隐藏元素的工具提示。当目标元素为display:none；时调用$（…）.tooltip（'show'）将导致工具提示的位置不正确。
2. 禁用元素的工具提示需要包装元素。要向disabled或.disabled元素添加工具提示，请将该元素放在<div>内，并将工具提示应用于该<div>。

工具提示插件的选项

Bootstrap为工具提示插件提供了 10 个选项，所有的选项都可以通过 data 属性或JavaScript进行设置。

表中 [1] 表示：
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

使用选项时，JavaScript使用以下语法格式来触发工具提示：
$('#example').tooltip(options)

其中，'#example' 为需要显示工具提示的页面元素，options 为使用对象表示的的选项。如，以下代码将以HTML文本格式显示一幅图像作为工具提示的内容，并延迟一秒显示、延迟半秒隐藏：

    <a href="##">小鸟</a>

$('a').tooltip({
   
   
    html:true,
    title:'<p>一只小鸟</p> <img src="../img/timg.jpg" width="170px" height="170px"/>',
    placement:'bottom',
    delay:{
   
   show:500,hide:100}
})

运行效果如下：

工具提示插件的方法

1、.tooltip(options)
使用一个可选的对象参数 options调用某个页面元素的工具提示。如：

$('某个元素').tooltip({
   
   
    html:true,
    title:'<p>一只小鸟</p> <img src="../img/timg.jpg" width="170px" height="170px"/>',
    placement:'bottom',
    delay:{
   
   show:500,hide:100}
})

2、.tooltip('show')
手动触发某个页面元素的工具提示，并在工具提示被实际显示出来之前（即shown.bs.tooltip事件被触发之前）返回主调函数。如：

$('#element').tooltip('show')

3、.tooltip('hide')
手动隐藏某个页面元素的工具提示，并在工具提示被实际显示出来之前（即hidden.bs.tooltip事件被触发之前）返回主调函数。如：

$('#element').tooltip('hide')

4、.tooltip('toggle')
手动打开或隐藏某个页面元素的工具提示，并在工具提示被实际显示出来之前（即shown.bs.tooltip或hidden.bs.tooltip事件被触发之前）返回主调函数。如：

$('#element').tooltip('toggle')

5、.tooltip('destroy')
手动隐藏并销毁某个页面元素的工具提示。如：

$('#element').tooltip('destroy')

工具提示插件的事件

Bootstrap为工具提示插件提供了 5 个事件，通过监听这些事件，可以对特定操作阶段的用户行为作出响应。

 $('#myTooltip').on('hidden.bs.tooltip', function () {
   
   
     alert("工具提示已经隐藏。");
 });

就先分享到这里!! :smile: 后续继续更新!!