Bootstrap工具提示不起作用

时间：2012-02-25 17:39:06

标签： twitter-bootstrap

我在这里生气。

我有以下HTML：

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

Bootstrap样式工具提示拒绝显示，只是一个正常的工具提示。

我的bootstrap.css运行得很好，我可以看到那里的类

我的HTML文件末尾有所有相关的JS文件：

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

我查看了Bootstrap示例的来源，看不到任何在那里启动工具提示的内容。所以我猜它应该起作用，还是我错过了一些重要的东西？

我有模态和警报以及其他工作正常，所以我不是一个完全白痴;）

感谢您的帮助！

25 个答案:

答案 0 :(得分：267)

总结：使用jQuery选择器激活工具提示

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

实际上，您不需要使用属性选择器，即使它的标记中没有rel="tooltip"，您也可以在任何元素上调用它。

答案 1 :(得分：178)

遇到同样的问题后，我发现这个解决方案无需在Bootstrap所需属性之外添加其他标记属性。

<强> HTML 

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

<强> JQuery的 

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

希望这有帮助！

答案 2 :(得分：32)

你不需要单独使用所有js文件

如果要使用所有引导函数，只需使用以下文件：

-bootstrap.css
-bootstrap.js

这两个都可以在http://twitter.github.com中找到 最后是 - jquery.js的最新版本

对于Glyphicons ，您需要图片

glyphicons-halfings.png和/或glyphicons-halfings-white.png（白色图像）
你需要上传到你网站上的/ img /文件夹（或）将它存储在你想要的地方，但是更改bootstrap.css中的文件夹目录

对于工具提示，您需要以下脚本           <head> </head>代码

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

就是这样......

答案 3 :(得分：25)

http://getbootstrap.com/javascript/#tooltips-usage

选择加入功能 出于性能原因，Tooltip和Popover data-apis是选择加入的，意思是

  

您必须自己初始化它们。

初始化页面上所有工具提示的一种方法是按照数据切换属性选择它们：

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

将这段代码放入html中可以使用工具提示

示例：

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

答案 4 :(得分：20)

我知道这是一个老问题，但是由于我在新版本的bootstrap中遇到了这个问题，而且网站上的内容并不清楚，所以这里是你启用工具提示的方法。

为您的元素提供类似“tooltip-test”的类

然后在您的javascript代码中激活此类：

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

答案 5 :(得分：18)

HTML 

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery的

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
});

这个对我有用。

答案 6 :(得分：14)

如果您按照其他答案建议$("[rel='tooltip']").tooltip();，那么您将仅对DOM中当前存在的元素激活工具提示。这意味着如果您要更改DOM并在以后插入动态内容，它将无法正常工作。此外，效率低得多，因为它为单个元素安装事件处理程序，而不是使用JQuery事件委托。因此，我发现激活Bootstrap工具提示的最佳方法是这一行代码，您可以将其置于文档准备中并忘记它：

$(document.body).tooltip({ selector: "[title]" });

请注意，我使用title作为选择器，而不是rel=title或data-title。这有一个优点，它可以应用于许多其他元素（rel 假设仅适用于锚点），并且它也适用于旧浏览器的“后备”。

另请注意，如果您使用上述代码，则不需要data-toggle="tooltip"属性。

Bootstrap工具提示很昂贵，因为您需要处理每个元素上的鼠标事件。这就是他们默认没有启用它的原因。因此，如果您决定在上面注释掉，那么如果您使用title属性，您的页面仍然有用。

如果你没有使用title属性，那么我建议使用纯CSS解决方案，如Hint.css或检查http://csstooltip.com，它根本不需要任何JavaScript代码。

答案 7 :(得分：13)

这是最简单的方法。 只需将其放在</body>之前：

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

查看Bootstrap's documentation about tooltips中给出的示例。

例如：

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

答案 8 :(得分：10)

工具提示和弹出窗口不仅仅是下拉或进度条等css插件。要使用工具提示和弹出窗口，您必须使用jquery（读取javascript）激活它们。

所以，假设我们想要点击一个html按钮来显示一个弹出窗口。

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

然后你需要有以下javascript代码来激活popover：

$('.popovers-to-be-activated').popover();

实际上，上面的javascript代码会激活所有具有“popovers-to-activated”类的html元素的popover。

毋庸置疑，在DOM准备就绪后，将上述javascript置于DOM-ready回调中以激活所有弹出窗口：

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

答案 9 :(得分：5)

在head部分中，您需要先添加以下代码

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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

然后在正文部分中，您需要编写以下代码

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

答案 10 :(得分：4)

如果仍未解决所有问题使用最新的Jquery库，如果使用最新的bootstrap 2.0.4和jquery-1.7.2.js，则不需要任何jquery选择器

只需使用rel="tooltip" title="Your Title" data-placement=" "

即可

根据您的意愿在数据展示位置使用顶部/底部/左/右。

答案 11 :(得分：3)

我在标题中添加了jquery和bootstrap-tooltip.js。在页脚中添加此代码对我有用！但是当我在标题中添加相同的代码时，它不起作用！ 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

答案 12 :(得分：3)

让我们使用一个示例来说明如何将工具提示添加到文档中的任何HTML元素。

注意：

如果这些工具提示示例在您将它们放入页面时不起作用，那么您还有另一个问题。您需要查看以下内容：

  • 包含脚本的顺序
  • 查看您是否尝试初始化已删除的HTML元素
  • 看看您是否尝试调用不再包含的JS文件中的方法

  • 查看您是否包含提供所需功能的JS文件（不仅适用于工具提示，还包括您在页面上使用的任何组件）。

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

上述任何项目的失败都可能（并且经常会）阻止javascript加载和/或运行，并且可以保持一切正常和破坏。

工作示例

假设您有徽章，并且您希望它在用户悬停时显示工具提示。

原始HTML： 

<span class="badge badge-sm badge-plain">Admin Mode</span>

普通引导工具提示

如果您正在为HTML元素创建工具提示，并且您正在使用Plain Bootstrap工具提示，那么您将负责使用您自己的JavaScript代码调用Tooltip Initializers。

BEFORE 

<span class="badge badge-sm badge-plain">Admin Mode</span>

AFTER 

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

初始化 

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Bootstrap模板工具提示（例如INSPINIA）

如果您使用的是引导程序模板（例如INSPINIA），则需要包含支持脚本以支持模板功能：

    <script src="/Scripts/app/inspinia.js" />

对于INSPINIA，包含的脚本在文档加载完成后通过运行以下javascript代码自动初始化所​​有工具提示：

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

因此，您不必自己初始化INSPINIA样式的工具提示。但是你必须以特定的方式格式化元素。初始值设定项在tooltip-demo属性中查找包含class的HTML元素，然后调用tooltip()方法初始化具有属性{{1}的任何子元素定义。

对于我们的示例徽章，请在其周围放置一个包含data-toggle="tooltip"的外部元素（如<div>或<span>），然后放置class="tooltip-demo"，{{1} }和data-toggle属性作为徽章元素中的实际工具提示。从上面修改原始HTML看起来像这样：

BEFORE 

data-placement

AFTER 

title

初始化 

<span class="badge badge-sm badge-plain">Admin Mode</span>

请注意<span class="tooltip-demo"> <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Tooltip on right" >Admin Mode</span> </span> 元素中的所有子元素都将正确准备其工具提示。我可以有三个子元素，都需要工具提示，并将它们放在一个容器中。

多个项目，每个项目都有一个工具提示

None

最好的用途是将<span class="tooltip-demo">添加到<span class="tooltip-demo"> <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span> <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span> <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span> </span> 或最外面的class="tooltip-demo"或<td>。

使用模板时的普通引导工具提示

如果您使用的是INSPINIA，但是您不想添加额外的外<div>或<span>标签来创建工具提示，则可以使用标准的Bootstrap工具提示而不会干扰模板。在这种情况下，您将负责自己初始化工具提示。但是，您应该使用<div>属性中的自定义值来标识工具提示项。这将使您的Tooltip初始化程序不会干扰受INSPINIA影响的元素。在我们的示例中，我们使用<span>：

BEFORE 

class

AFTER 

standalone-tt

初始化 

<span class="badge badge-sm badge-plain">Admin Mode</span>

答案 13 :(得分：3)

我刚补充说：

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

在bootstrap.min.js下面，它可以工作。

答案 14 :(得分：3)

在我的特定情况下，它没有用，因为我包含了两个版本的jQuery。一个用于引导程序，另一个用于Google Charts。

当我删除图表的jQuery加载时，它工作正常。

答案 15 :(得分：3)

如果使用Rails + Haml更容易包含工具提示，只需执行：

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

这只是在元素末尾添加以下行。

:rel => "tooltip", :title => "Referential Guide"

答案 16 :(得分：2)

我遇到了类似的问题，特别是如果你在像垂直按钮容器这样的按钮容器中运行。在这种情况下，您必须将容器设置为＆＃39; body＆＃39; 

I have added a jsfiddle example

example

答案 17 :(得分：2)

您必须在html之后添加工具提示javascript 。像这样：

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

或使用$（document）.ready：

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

工具提示无法正常工作，因为您将工具提示html放在javascript 之前，因此他们不知道工具提示是否有javascript。在我看来，脚本是从顶部到底部读取的。

答案 18 :(得分：2)

如果您使用javascript创建包含工具提示的html，然后将其插入到文档中，则必须在将html插入文档后激活popover / tooltip，而不是在文档加载时... < / p>

答案 19 :(得分：1)

将您的代码放入文档准备

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

就我而言，我也错过了http://twitter.github.com/bootstrap/assets/css/bootstrap.css上的工具提示css课程 所以不要忘记。

答案 20 :(得分：1)

从工具提示上的引导程序docs

出于性能原因选择使用工具提示，因此您必须自己对其进行初始化。  初始化页面上所有工具提示的一种方法是通过其数据选择它们-  切换属性：

  $('[data-toggle="tooltip"]').tooltip()

答案 21 :(得分：0)

您需要执行以下操作。添加

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

代码页面上的代码（最好在<head>部分）。

同时将data-toggle: "tooltip"添加到您要使用它启用的任何内容。

答案 22 :(得分：0)

使用工具提示为您想要的任何元素添加data-toggle="tooltip"。

答案 23 :(得分：0)

您可以使用 Popper.js 

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

并调用工具提示功能：

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});

答案 24 :(得分：-2)

快速轻松替代Bootstrap工具提示插件：

HTML：

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS：

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT：

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

标签/文本必须包含在“mytooltip”类的包装中。此包装必须具有Id。

在标签之后，工具提示文本包含在“mytooltiptext”类的div中，而id包含父包装器的ID +“_ tttext”。可以使用选择器的其他选项。

希望它有所帮助。

相关问题
最新问题