title美化效果 Bootstrap提示工具（Tooltip）插件

这篇文章主要为大家详细介绍了title美化效果 Bootstrap提示工具（Tooltip）插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

如上图，这样的title效果是不是很多朋友都喜欢拥有的？今天361模板网就把这个漂亮的title效果分享给大家，让你的网站炫酷起来。

要实现这样的效果，我们一般会使用到 Bootstrap提示工具（Tooltip）插件！

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

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

请悬停在我的上面

2、通过JavaScript：

通过 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

运行效果查看 Bootstrap提示工具（Tooltip）插件

以上就是title美化效果 Bootstrap提示工具（Tooltip）插件的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。