Question

尝试使Bootstrap显示工具提示功能，我完全按照Bootstrap DOC关注Tooltips并声明我的属性和属性。当我将鼠标悬停在文本上时，数据Some tooltip text!显示为只有alt=""函数，但没有像文档中提到的Bootstrap样式。

我已采取措施解决此问题：

包含来自外部CDN
激活工具提示抛出<Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
添加Google API of jQuery（我知道不是必须的）
检查页面是否正在加载Bootstrap CDN和外部CDN（All Do！）

标题HTML标记

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML标记

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

以下是它如何显示的图像。

enter image description here

Answer 1

还要记住， Bootstrap工具提示不喜欢 jQuery UI （有一些名称冲突，'工具提示'就是其中之一）。

解决方案是更改脚本加载顺序：首先是jQuery UI，之后是bootstrap.js.

Answer 2

这是一个适合您的工作模板。我猜错了什么：

jQuery总是需要在bootstrap.js之前来。
如果您没有运行本地服务器，则需要将http：添加到CDN地址。
您可能一直在尝试初始化head标记中的工具提示。问题是该文件可能还没有准备好。

以下工作正常。

<强> HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
    });
    </script>
  </body>
</html>

Answer 3

您的问题很可能是您未能正确初始化工具提示。看一下这个bootply

documents州：

enter image description here

<强> HTML ：

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

<强> Jquery的：

$("[data-toggle=tooltip").tooltip();

请注意，只需bootstrap.min.css和bootstrap.js工具提示即可正常使用。
请记住使用绝对网址加载脚本和样式表（在路径前添加/）。
bootstrap依赖于jquery，首先加载jquery。

Answer 4

尝试在HTML底部添加此代码我需要它来触发工具提示才能工作。在HTML代码中将class =“ttop”添加到工具提示中。

$(document).ready(function(){
$(".ttop").tooltip({
    placement : 'top'
});
});

Answer 5

在我使用AngularJS的情况下，即使所有css / js脚本都已正确排序/调用，但仍未显示。

问题在于它来自带有“ng-if”属性的标签。我把它从那个标签放在外面它工作正常。

当jquery初始化工具提示时，AngularJS会使用“ng-if”渲染元素时可能会有轻微的延迟。

Answer 6

OP精确地描述了我在Angular 8中使用JQuery 3.4.1的Bootstrap 4.4.1和使用ng-bootstrap或ngx-bootstrap的 not 遇到的问题。 OP中的图像已打开。

某些答案很有帮助，但缺少将DIV包裹在* ng中的关键点如果很难获得tooltip（）来查看DIV应该附加侦听器以用于mouseenter / mouseleave事件。第一次加载文档时执行此操作对于动态添加和删除内容的单页应用程序毫无用处。

关键答案出现了https://github.com/twbs/bootstrap/issues/4215和codepen https://codepen.io/Johann-S/pen/djJYPb。对我来说，解决方法是...

app.component.ts ...仅在此一个文件中一次即可

import { Component } from '@angular/core'
declare var $: any
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.sass']
})
export class AppComponent {
    constructor(){
        $('body').tooltip({
            selector: '[data-toggle="tooltip"]'
        })
    }
}

在每个地方都应该看到工具提示（对我来说是component.html文件）。

<div data-toggle="tooltip" data-placement="top" title="Tool Tip Text">

绑定到主体可以使工具提示选择器看到任何“新” DOM元素的添加，而与时间无关。

关于性能方面的改进...：D虽说还可以，但还不确定：D。

Answer 7

您必须初始化工具提示，如：

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

Answer 8

如果您使用带有bootstrap 4的popper.js，而不是使用：

<script src="~/Scripts/popper.min.js"></script>

使用UMD目录中的.js：

<script src="~/Scripts/umd/popper.min.js"></script>

Answer 9

所有jquery * .js文件必须位于bootstrap.js之前。

jquery-{version}.js
jquery-confirm.min.js
jquery-ui-{version}.js
jquery.validate*
etc...
bootstrap.js

然后使用：

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

Answer 10

确保是否添加bootstrap.min.js 并添加

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

Answer 11

此问题已得到充分回答，但解决方案不适用；我的链接状况良好。原来与Font Awesome（FA）存在冲突。例如，这对我不起作用：

<span class="fas fa-search" data-toggle="tooltip" title="Search my site"></span>

如果我删除FA类，并在跨度内输入文本，则工具提示将以适当的样式呈现...但这不是一个好的解决方案。但是，通过将该跨度封装到另一个跨度中，可以起作用：

<span data-toggle="tooltip" title="Search my site"><span class="fas fa-search"></span></span>

我希望这可以帮助那些奇怪的灵魂。或两个：^）

Bootstrap工具提示不显示工具提示的样式，仅显示数据

11 个答案: