Bootstrap 工具提示参考

通过 data-* 属性启用

data-toggle="tooltip" 激活工具提示。

title 属性指定应在工具提示内显示的文本。

<div class="container">
    <a href="#" data-toggle="tooltip" title="Hello World!">鼠标经过我</a>
</div>
<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
</script>

尝试一下

工具提示选项

可以通过数据属性或 JavaScript 传递选项；对于数据属性，将选项名称附加到 data-，如 data-placement="" 所示。

参数	类型	默认值	描述	示例
animation	布尔值	true	指定在显示和隐藏工具提示时是否添加CSS淡入淡出过渡效果 true-添加淡入淡出效果 false-不添加淡入淡出效果	尝试一下
container	字符串或布尔值	false	将工具提示附加到特定元素示例：container:'body'	尝试一下
delay	数字或者对象	0	指定显示和隐藏工具提示所花费的毫秒数。要指定显示延迟和另一个隐藏延迟，请使用对象结构： delay:{show: 500, hide: 100}-显示工具提示将花费500毫秒，而隐藏工具提示则仅需100毫秒	尝试一下
html	布尔值	false	指定是否在工具提示接受HTML标签： true-接受HTML标签 false-不接受HTML标记注意：必须将HTML插入title属性（或使用title选项）当设置为false（默认）时，将使用 jQuery text() 方法；如果您担心XSS攻击，请使用此选项	尝试一下
placement	字符串	"right"	指定工具提示位置可能的值： "top" - 顶部显示工具提示 "bottom" - 底部显示工具提示 "left" - 左侧显示工具提示 "right" - 右侧显示工具提示 "auto" - 让浏览器确定工具提示的位置；例如，如果值为 "auto left"，则工具提示将在可能的情况下显示在左侧，否则显示在右侧；如果值为 "auto bottom"，则工具提示将在可能的情况下显示在底部，否则显示在顶部	尝试一下
selector	字符串或者布尔值	false	将工具提示添加到指定的选择器	尝试一下
template	字符串		创建工具提示时要使用的基本HTML 工具提示的标题将插入到.tooltip-inner类的元素中，而.tooltip-arrow类的元素将成为工具提示的箭头最外部的包装器元素应具有.tooltip类
title	字符串	""	指定应在工具提示中显示的文本	尝试一下
trigger	字符串	"hover focus"	指定如何触发工具提示可能的值： "click" - 单击触发工具提示 "hover" - 在悬停时触发工具提示 "focus" - 当焦点获得焦点时触发工具提示（通过点按或单击.e.g） "manual" - 手动触发工具提示提示：要传递多个值，请用空格分隔	尝试一下
offset	数字或字符串	0	工具提示相对于目标的偏移量
fallbackPlacement	字符串或数组	"flip"	指定Popper在回退时将使用的位置
boundary	字符串或元素	"scrollParent"	工具提示的溢出约束边界；接受值“viewport”，“window” 或 “scrollParent”或HTML元素

工具提示方法

下表列出了所有可用的工具提示方法。

方法	描述	示例
.tooltip(options)	使用选项激活工具提示；查看上面的参数选项以获取有效值	尝试一下
.tooltip("show")	显示工具提示	尝试一下
.tooltip("hide")	隐藏工具提示	尝试一下
.tooltip("toggle")	切换工具提示	尝试一下
.tooltip("dispose")	隐藏并摧毁工具提示	尝试一下

工具提示事件

下表列出了所有可用的工具提示事件。

事件	描述	示例
show.bs.tooltip	在将要显示工具提示时发生	尝试一下
shown.bs.tooltip	在完全显示工具提示时发生（在CSS转换完成之后）	尝试一下
hide.bs.tooltip	在工具提示即将被隐藏时发生	尝试一下
hidden.bs.tooltip	在完全隐藏工具提示时发生（在CSS转换完成之后）	尝试一下

Bootstrap 工具提示参考

通过 data-* 属性启用

工具提示选项

工具提示方法

工具提示事件

相关页面