引导工具提示不起作用

260

我要疯了。

我有以下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示例的来源，却看不到任何能在其中任何地方启动工具提示的内容。因此，我猜测它应该可以正常工作，还是我在这里缺少了一些重要的东西？

我有模式，警报和其他功能都很好，所以我不是一个笨蛋；）

谢谢你的帮助！

twitter-bootstrap 
— 迈克·巴特利特
source
2
该工具提示将在twitters示例中的application.js文件中启动。您可以发布您的html吗？想看一下如何初始化脚本。
— 安德烈斯·伊利希
2
啊...。我忽略了第一条评论。这项工作也应该这样：code<a href="#"rel="tooltip"title="一个不错的工具提示"class="tooltip-test">测试</a> <br> <script> //工具提示演示$（' .tooltip-test'）。tooltip（）</ script>
— Mike Bartlett
1
别忘了将选择器传递给工具提示选项，$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich 2012年
谢谢安德烈斯。实际上，我似乎似乎不需要选择器，这是因为a的类被称为工具提示测试。
— Mike Bartlett
3
没有选择器选项，工具提示对我不起作用，这是我提出的一个演示：jsfiddle.net/VXctp，在没有选择器的情况下尝试。
— 2012年

Answers:

276

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

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

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

— 曼努埃尔·埃伯特（Manuel Ebert）
source
13
对于使用Rails的用户，这已经在中定义bootstrap.js.coffee了$(".tooltip").tooltip()。只要确保包含//= require bootstrap在您的中即可application.js。
— slhck
6
将class .tooltip添加到任何元素都会对我不利。如果我设法用鼠标在其中找到隐藏的元素，则将隐藏带有.tooltip类的元素内的内容，并显示工具提示。使用任何其他选择器或类名都可以正常工作。\
— LeonelGalán13年
4
@Leito是正确的，引导程序定义了样式，.tooltip默认情况下它们是不可见的。但是，您可以使用rel属性或任何其他类作为选择器。
— Manuel Ebert
3
是的，您需要HTML标记和JS选择器。这些不是应用工具提示的替代方法。
— ATSiem
1
有些人可能试图以模态显示工具提示，但并非在所有引导程序版本中均如此。如果您在普通页面（而不是模式页面）中尝试它并且可以正常工作，那么您就知道是问题所在。
— mjnissim 2013年
212

遇到相同的问题后，我发现此解决方案可以工作，而不必在Bootstrap必需属性之外添加其他标签属性。

的HTML

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

jQuery查询

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

希望这可以帮助！

— 马库斯·霍尔斯彻（Marcus Hoelscher）
source
20
谢谢！这对我有用。某种程度上，此页面上的其他解决方案对我不起作用。
— 2014年
1
我和罗曼在一起。此解决方案也适用于bootswatch css变体。
— DaveCS 2014年
这对我有用。直到我尝试了这一步，其他任何东西都无法使它生效。谢谢！
— BlakePetersen 2014年
1
这也对我有用。知道为什么$（'[data-toggle =“ tooltip”]'）。tooltip（{'placement'：'top'}）; 不起作用？
— ZeroCool 2015年
谢谢，这对我有用。只需确保在加载JQuery库之后将代码插入<script>标记之间即可。
— GeraldScott
31

您不需要单独的所有js文件

如果要使用所有引导程序功能，请使用以下文件：

-bootstrap.css
-bootstrap.js

两者都可以在http://twitter.github.com中找到
，最后可以在
最新版本的jquery.js中找到。

对于Glyphicons，您需要图像

glyphicons-halfings.png和/或glyphicons-halfings-white.png（白色图像）
，您需要将其上传到网站的/ img /文件夹中（或将其存储在所需的位置），但要在引导程序中更改文件夹目录.css

对于工具提示，您需要在<head> </head>标签内添加以下脚本 

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

而已...

— 哈里斯·库马尔
source
27

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

选择加入功能出于性能原因，Tooltip和Popover数据API是选择加入的，这意味着

您必须自己初始化它们。

初始化页面上所有工具提示的一种方法是通过其data-toggle属性选择它们：

<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>
— 最大O。
source
2
感谢您分享这个选择加入的概念！请勿从任何教程中阅读它。
— dpp
我所有的jquery / bootstrap工具提示信息的解决方案
— DJ Burb，
缺少提供的链接：请查看getbootstrap.com/docs/4.1/components/tooltips
— Guillaume
20

我知道这是一个老问题，但是由于我在引导的新版本中遇到了这个问题，并且在网站上不清楚，因此您可以启用工具提示。

给您的元素一个类，例如“工具提示测试”

然后在您的javascript标签中激活此类：

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

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— 阿米尔·索莱曼尼
source
这是唯一对我有用的解决方案。我正在使用data-original-title =“ {{someAngularJSV​​ar}}”来更新标题，并且它可以正常工作。
— WKara
19

的HTML

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

jQuery查询

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

这是我的工作。

— 伊戈尔（Igor Shvydok）
source
1
这个建议对我也很有效。我喜欢它，因为它简单而优雅。它使您可以继续使用Bootstrap标准，就像默认情况下插件已初始化一样，例如Dropdown和Tab元素。我将@Igor建议的JS添加到一个新文件中，并将其捆绑到原始的bootstrap.js中
— IagoRodríguez-Quintana
14

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

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

请注意，我使用的title是选择器，而不是rel=title或data-title。这具有可应用于许多其他元素的优势（在rel被认为是只为锚），并且还可以作为“备用”为旧的浏览器。

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

引导工具提示非常昂贵，因为您需要处理每个元素上的鼠标事件。这就是为什么他们默认未启用它的原因。因此，如果您决定注释掉上面的行，那么如果您使用title属性，您的页面仍然可以使用。

如果可以不使用title属性，那么我建议您使用纯CSS解决方案，例如Hint.css或检查完全不需要任何JavaScript代码的http://csstooltip.com。

— Shital Shah
source
我正在努力解决这一问题，因为动态生成深入了多个层次。href值是动态生成的内容，并且生成的div id基于与href值匹配的商品编号。因此，如果我有一个页面，其中包含项类型A的链接，那么我就有一个项a-1，项a-2，项a-3的列表，每个链接都指向项的各个页面，但是我想工具提示内容可在悬停时显示动态内容，因此用户可以在单击完整链接之前先了解一下该项目。
— Melanie Sumner 2014年
这是最有帮助的。我将工具提示设置为绑定到图标，并且图标库具有某种异步加载，因此无法绑定。太奇怪了，因为它在使用类选择器而不是ID时可以工作。谢谢您的帮助！
— 尼克·伍德汉姆斯
10

Tooltip和popover不仅是CSS插件，例如dropdown或progressbar。要使用工具提示和弹出窗口，必须使用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代码来激活弹出框：

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

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

不用说，在DOM准备就绪后，将上述javascript放入DOM就绪回调中即可激活所有弹出窗口：

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— 玛雅克（Mayank Jaiswal）
source
5

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

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

— 赶紧2707
source
4

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

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

根据需要，在数据位置使用上/下/左/右。

— 哈里斯·库马尔
source
3

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

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— 卡尔提克
source
3
在这种情况下，DOM尚未加载，因此页面上不存在所有元素。将上面的代码包装在$(function() { ... });
— johnml
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"
— 安德烈斯·卡勒
source
我真的希望这对我有用，但是可惜没有。
— Turboladen
现在，我比Rails更喜欢Djanto，但是如果您粘贴代码，我可能会尝试给您一些提示。
— Andres Calle 2013年
3

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

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

— 迪特尔
source
3

我刚刚添加：

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

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

— 安迪辛
source
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代码调用工具提示初始化程序。

之前

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

后

<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()方法以初始化定义了该属性的所有子元素data-toggle="tooltip"。

在我们的例子徽章，放置在其周围的外元件（如一个<div>或<span>具有）class="tooltip-demo"，然后将data-toggle，data-placement以及title属性为是徽章的元件内的实际工具提示。从上方修改原始HTML，如下所示：

之前

<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>或最外层<div>或<span>。

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

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

之前

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

后

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

初始化器

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— 迈克·斯蒂林
source
2

如果要使用javascript创建包含工具提示的html，然后将其插入文档中，则必须在将html插入文档中之后（而不是在文档加载时）激活弹出框/工具提示。

— chri_chri
source
2

您必须将工具提示javascript放在html 后面。像这样 ：

<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。我认为，脚本是从上至下阅读的。

— 放大
source
2

我有一个类似的问题，尤其是如果您在像垂直按钮容器的按钮容器中运行。在这种情况下，您必须将容器设置为“ body”

I have added a jsfiddle example

例

— 肖恩·维德
source
1

从工具提示上的引导文档

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

  $('[data-toggle="tooltip"]').tooltip()
— 拉希尔·艾哈迈德（Rahil Ahmad）
source
0

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

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

代码在页面上的某个位置（最好是在此<head>部分中）。

还要添加data-toggle: "tooltip"到要启用它的任何内容。

— 卡伦·查尔兹
source
0

你可以使用Popper.js

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

并调用工具提示功能：

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— 莫森·纽托亚（Mohsen Newtoa）
source
-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的div中，该div包含父包装的ID +“ _ tttext”。可以使用选择器的其他选项。

希望能帮助到你。

— 杰迪斯拉
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.