Twitter Bootstrap 工具提示在按钮上不起作用答案

【问题标题】：Twitter Bootstrap tooltip not working on buttonTwitter Bootstrap 工具提示在按钮上不起作用
【发布时间】：2013-05-13 06:11:25
【问题描述】：

我在页面底部的脚本标签中添加了以下内容：

JavaScript

$('.resetPrice').tooltip();

HTML

<button title="reset pricing" class="btn btn-mini resetPrice" type="button" id="ResetAA1-1-1">
    <i class=" icon-refresh"></i>
</button>

任何帮助将不胜感激。

【问题讨论】：

应该是从title属性中提取出来的。
你能用小提琴复制它吗？
请在您的问题中提供更多信息，以便有人可以帮助您，否则这个问题对于那些在网上搜索此问题的解决方案时偶然发现它的人来说是没有用的。
请显示使用你的javascript包含。

标签： twitter-bootstrap

【解决方案1】：

这里看起来问题不大。 2.x 版和 3.0 版之间的 API 处理工具提示调用的方式没有关键区别。

您可以阅读有关 2.3.2 和 3.0 的 ToolTip API 的更多信息

如果没有更多信息，可能有两件事：

您应该确保使用准备好的 doc 函数并等到 DOM 加载后运行工具提示调用
确保您已包含对引导外部 css 和 js 文件的正确引用（在每个演示中都可用）
如果该元素位于页面的最顶部，并且您使用的是指向上方的默认工具提示，您将无法看到它。您要么必须向下移动对象，要么使用 placement 选项。

这段代码应该可以正常工作

$(function() {
    $('.resetPrice').tooltip();
});

这是2.3.2 fiddle 和3.0 fiddle

两者都产生以下结果：

看看您是否可以重现任何其他问题，如果您仍然遇到问题，请告诉我们

【讨论】：

【解决方案2】：

您是否启用了工具提示 javascript？如果没有，那么您需要在 html 的头部添加以下内容：

<script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

引导页面特别注意使用按钮组的工具提示：

“在 .btn 组内的元素上使用工具提示或弹出框时，您必须指定选项 container: 'body' 以避免不必要的副作用（例如元素变宽和/或失去其圆角当工具提示或弹出框被触发时）。”

【讨论】：

【解决方案3】：

    Changed to

    <button title="reset pricing" class="btn btn-mini resetPrice" type="button" id="ResetAA1-1-1">
        <i class=" icon-refresh" data-toggle="tooltip" title="Your Title" ></i>
    </button>

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

【讨论】：

嘿，为什么工具提示在图标而不是按钮上？

【解决方案4】：

看起来这不是您的问题，但请注意 Bootstrap 工具提示不适用于 disabled 按钮。见：

How to enable bootstrap tooltip on disabled button?

【讨论】：