Bootstrap 提示工具

提示工具（Tooltip）是鼠标悬停时弹出的简短说明气泡，常用来解释图标按钮、缩写词或表单字段的含义。它与下拉、模态框不同：不会随 data 属性自动初始化，必须先手动调用一次 tooltip()，这是最容易踩的坑。

先初始化再使用

页面加载完成后，对所有带 data-toggle="tooltip" 的元素统一初始化一次：

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

说明：tooltip 需要测量定位，Bootstrap 刻意要求显式初始化；漏掉这一步气泡就不会出现。

基础用法

触发元素加 data-toggle="tooltip"，提示文字写在 title 中：

<button type="button" class="btn btn-default"
    data-toggle="tooltip" title="删除这条记录">
    删除
</button>

显示效果：鼠标悬停在"删除"按钮上，按钮上方浮现深色小气泡"删除这条记录"，移开后消失。

控制气泡位置

用 data-placement 指定方向，四个方向皆可：

<button data-toggle="tooltip" data-placement="top" title="顶部提示">上</button>
<button data-toggle="tooltip" data-placement="bottom" title="底部提示">下</button>
<button data-toggle="tooltip" data-placement="left" title="左侧提示">左</button>
<button data-toggle="tooltip" data-placement="right" title="右侧提示">右</button>

显示效果：气泡分别出现在对应方向并带小箭头；写成 auto 时浏览器会自动选择空间充足的一侧。

常用选项

初始化时传入对象可细调行为：

<script>
$('#detail').tooltip({
    placement: 'auto',              // 空间不足自动换方向
    html: true,                     // 允许 title 中包含 HTML
    delay: { show: 300, hide: 100 } // 延迟显示/隐藏
});
</script>

说明：其他常用选项还有 trigger（默认 hover focus）、title、animation、container 等；开启 html 后 title 里可写链接或小图。

编程式 API

气泡也可用方法手动控制，并监听显示周期事件：

<script>
$('#detail').tooltip('show');   // 显示气泡
$('#detail').tooltip('hide');   // 隐藏气泡
$('#detail').tooltip('toggle'); // 切换状态
$('#detail').on('shown.bs.tooltip', function () {
    // 气泡完全显示后触发，可在此做统计
});
</script>

小结：tooltip 三步走——先 $('[data-toggle="tooltip"]').tooltip() 初始化，再用 title 写文字、data-placement 定方向；进阶时通过选项对象和 show/hide/toggle 方法精确控制。