Bootstrap 工具提示不显示工具提示的样式，仅显示数据
[英]Bootstrap tooltip doesn't show style of the tooltip, only data
问题描述
试图让 Bootstrap 显示工具提示功能，我完全按照Bootstrap DOC关于工具提示并声明我的属性和属性。 当我将鼠标悬停在文本上时 数据Some tooltip text! 显示只有alt=""函数，但不像 Bootstrap 在他们的文档中提到的那样风格。
我为解决此问题而采取的步骤：
- 包含来自外部CDN 的tooltip.js
- 激活工具提示 throw
<Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script> - 添加jQuery 的 Google API （我知道不是必需的）
- 检查页面是否正在加载 Bootstrap CDN 和外部的（全部做！）
标题 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>
这是它如何显示的图像。
11 个解决方案
解决方案1
39 2017-03-29 11:35:41
还要记住， Bootstrap Tooltip不喜欢jQuery UI （有几个名称冲突，'tooltip' 就是其中之一）。
解决方案是更改脚本加载顺序：首先是 jQuery UI，然后是 bootstrap.js。
解决方案2
17 已采纳 2014-08-05 19:35:26
这是您的工作模板。 我对出了什么问题的猜测：
- 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>
解决方案3
11 2014-08-05 19:35:23
您的问题很可能是您未能正确初始化工具提示。 看看这个bootply
文件指出：
HTML :
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
查询：
$("[data-toggle=tooltip").tooltip();
- 请记住，您只需要
bootstrap.min.css和bootstrap.js使工具提示正常工作。 - 请记住使用绝对 URL 加载脚本和样式表（在路径前添加
/）。 - bootstrap 依赖于 jquery，首先加载 jquery。
解决方案4
3 2020-01-03 10:26:03
OP 准确地描述了我在使用 JQuery 3.4.1 而没有使用 ng-bootstrap 或 ngx-bootstrap 的 Bootstrap 4.4.1 中看到的问题。 OP 中的图像令人印象深刻。
一些答案是有帮助的，但忽略了关键点，即如果 DIV 被包裹在 *ngIf 中，很难让 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，尽管打字很轻。
解决方案5
1 2014-08-05 19:35:17
尝试在 HTML 底部添加此代码，我需要它来触发工具提示工作。 将 class="ttop" 添加到 HTML 代码中的工具提示。
$(document).ready(function(){
$(".ttop").tooltip({
placement : 'top'
});
});
解决方案6
1 2017-09-19 03:59:01
在我使用 AngularJS 的情况下，即使所有 css/js 脚本都被正确排序/调用，但仍然没有显示。
问题是它来自带有“ng-if”属性的标签。 在我把它从那个标签放在外面之后它工作正常。
在 jquery 初始化工具提示时，AngularJS 使用“ng-if”渲染元素可能会有一点延迟。
解决方案7
0 2017-09-04 08:35:48
您必须初始化工具提示，如：
$('[data-toggle="tooltip"]').tooltip()
解决方案8
0 2017-11-09 19:38:52
如果你在 bootstrap 4 中使用 popper.js，而不是使用：
<script src="~/Scripts/popper.min.js"></script>
使用 UMD 目录中的 .js：
<script src="~/Scripts/umd/popper.min.js"></script>
解决方案9
0 2018-06-20 11:22:06
所有的 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>
解决方案10
0 2019-11-22 21:54:32
确保您添加bootstrap.min.js并添加
<script> $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script>
解决方案11
0 2020-06-25 15:50:58
这个问题已经得到了充分的回答，但解决方案并不适用； 我的链接状况良好。 事实证明与 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>
我希望这可以帮助那里的奇怪灵魂。 或两个:^)
引导工具提示的样式为什么不显示？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.