4

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

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>

任何帮助将不胜感激。

4

4 回答 4

5

这里看起来问题不大。版本 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

两者都产生以下结果：

演示

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

于 2013-08-23T21:19:23.780 回答
2

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

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

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

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

于 2014-08-13T18:33:34.790 回答
0 
    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>
于 2015-02-24T09:43:36.447 回答
0

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

如何在禁用按钮上启用引导工具提示？

于 2018-05-02T20:06:05.157 回答