Twitter Bootstrap工具提示无法处理按钮

Question

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

的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>

非常感谢任何帮助。

Answer 1

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

您可以详细了解2.3.2和3.0

的工具提示API

没有进一步的信息，它可能有两件事：

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

此代码应该可以正常工作

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

这是2.3.2 fiddle和3.0 fiddle

两者都产生以下结果：

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

Answer 2

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

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

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

＆＃34;在.btn-group中的元素上使用工具提示或弹出窗口时，您必须指定选项容器：＆＃39; body＆＃39;避免不必要的副作用（例如当触发工具提示或弹出窗口时元素变宽和/或失去圆角）。＆＃34;

Answer 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>

Answer 4

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

How to enable bootstrap tooltip on disabled button?