Bootstrap插件设计之Tooltip插件解析

bootstrap插件设计之tooltip插件解析

添加提示工具的方式有两种： 通过data属性：只需向一个锚标签添加data-toggle="tooltip"即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下，插件把提示工具(tooltip)设置在顶部。 通过 javascript 触发提示工具(tooltip)：

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

提示工具(tooltip)插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 css 插件。如需使用该插件，您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip)：

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

实例：

提示工具(tooltip)插件 - 锚

这是一个 默认的 tooltip . 这是一个 左侧的 tooltip . 这是一个 顶部的 tooltip . 这是一个 底部的 tooltip . 这是一个 右侧的 tooltip

提示工具(tooltip)插件 - 按钮

默认的 tooltip左侧的 tooltip顶部的 tooltip底部的 tooltip右侧的 tooltip

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