bootstrap的提示插件tooltip的使用
文章标签:
bootstrap怎么使用的
提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。效果如下:
您可以有以下两种方式添加提示工具(tooltip):
1、通过data属性来调用;
如需添加一个提示工具(tooltip),只需向一个a标签添加 data-toggle="tooltip" 即可。a标签的 title 即为提示工具(tooltip)的文本。默认情况下,提示在顶部。
例如:
<a href="#" data-toggle="tooltip" title="我是提示" data-placement="top">请提示出现在我的上面</a>
当鼠标在“请提示在我的上面” 上悬停,就会出现我是提示的注解。
data-placement 有四个值:分别是top bottom left right。就是提示显示的位置;top是默认值。
title里可以包含html标签;例如:title="<h2>'我是h2大小的提示 </h2>"
2、通过JavaScript来调用;
$('#identifier').tooltip(options)
$(function () { $("[data-toggle='tooltip']").tooltip(); });
提示工具(Tooltip)插件它不是纯 CSS 插件。如使用该插件,您必须使用 jquery 激活它。使用上面的脚本来启用。
这就是tooltip的使用方法,一般情况下,我们都使用第一种方法来进行使用。