Bootstrap工具提示不起作用
Mik*_*ett 255 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示例的来源,看不到任何在那里启动工具提示的内容.所以我猜它应该工作,还是我错过了一些重要的东西？
我有模态和警报以及其他工作正常,所以我不是一个完全白痴;)
谢谢你的帮助!
Man*_*ert 273
总结一下:使用jQuery选择器激活工具提示
<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>
实际上,您不需要使用属性选择器,您可以在任何元素上调用它,即使它rel="tooltip"在其标记中没有.
- 对于那些使用Rails的人来说,这已经在`bootstrap.js.coffee`中定义了`$(".tooltip").tooltip()`.只需确保在`application.js`中包含`// = require bootstrap`即可. (13认同)
- 将类.tooltip添加到任何元素将打破我的工具提示.带有.tooltip类的元素内部的内容将隐藏,如果我设法用鼠标找到隐藏元素,工具提示将显示.使用任何其他选择器或类名称将正常工作. (6认同)
- @Leito是正确的,bootstrap为`.tooltip`定义样式,默认情况下,它们是不可见的.但是,您可以使用`rel`属性或任何其他类作为选择器. (4认同)
- 是的,您需要HTML标记和JS选择器.这些不是应用工具提示的替代方法. (3认同)
Mar*_*her 195
遇到同样的问题后,我发现这个解决方案无需在Bootstrap所需属性之外添加额外的标签属性.
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery的
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
希望这可以帮助!
- 谢谢!这对我有用.不知何故,此页面上的其他解决方案对我不起作用. (19认同)
小智 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>
而已...
Max*_* O. 27
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>
- 感谢您分享这个选择加入的概念！切勿从任何教程中阅读它。 (2认同)
Ami*_*ani 20
我知道这是一个老问题,但由于我在新版本的bootstrap中遇到了这个问题并且在网站上不清楚,这里是你如何启用工具提示.
给你的元素一个类"工具提示测试"
然后在javascript标记中激活此类:
<script type="text/javascript">
$('.tooltip-test').tooltip();
</script>
<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
Igo*_*dok 19
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery的
$(document).ready(function() {
$('[data-toggle=tooltip]').tooltip();
});
这个对我有用.
- 这个建议对我来说也非常有效。我喜欢它，因为它简单而优雅。它允许您继续使用 [Bootstrap](http://getbootstrap.com/javascript/) 标准，就像默认情况下初始化插件一样，就像 Dropdown 和 Tab 元素一样。我将@Igor提出的JS添加到一个新文件中，并将其[捆绑](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification)到原始的bootstrap.js (2认同)
Shi*_*hah 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代码.
小智 14
这是最简单的方法.只是把它放在</body>:
<script type="text/javascript">
$("[data-toggle=\"tooltip\"]").tooltip();
</script>
查看Bootstrap文档中有关工具提示的示例.
例如:
<a href="#"
data-toggle="tooltip"
data-placement="bottom"
title="Tooltip text here">Link with tooltip</a>
- 请关闭type属性...编辑只有一个错字是PITA:S (2认同)
May*_*wal 10
工具提示和弹出窗口不仅仅是下拉或进度条等css插件.要使用工具提示和弹出框,您必须使用jquery(读取javascript)激活它们.
所以,假设我们想要点击一个html按钮显示一个popover.
<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();
});
// 更新
- 2023 年 3 月：包含 Bootstrap v5.x 和 v4.x 的工具提示
Bootstrap v5.x（已测试）
步骤1
包含 Bootstrap CSS
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
第2步
添加 HTML
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-placement="left" title="I'm a Working Tooltip">Hover me!</button>
步骤3
包括所有脚本。您还需要激活工具提示。如果您想移动 jquery，可以将其移动到外部文件activate-tooltip.js。
出于性能原因，工具提示是可选的，因此您必须自行初始化它们。
请参阅下面的常见问题解答以了解脚本顺序。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript">
// If you do not want to use jQuery you can use Pure JavaScript. See FAQ below
$( document ).ready(function() {
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
Bootstrap v4.x（已测试）
步骤1
包含 v4 css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript">
// If you do not want to use jQuery you can use Pure JavaScript. See FAQ below
$( document ).ready(function() {
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
第2步
添加 HTML。请注意， 是data-toggleforv4和data-bs-toggleforv5
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
步骤3
请参阅Bootstrap V5.x中的步骤 3。您需要做的唯一更改是更改.data-toggle
常问问题
如果不包含 jQuery 会发生什么？
jQuery 是启用工具提示。如果不包含工具提示将无法按预期工作，并且您还会Uncaught ReferenceError: $ is not defined在控制台中收到错误消息。
没有 jQuery
使用 jQuery
我在工具提示中没有看到小箭头。
确保您使用正确的 Bootstrap CSS 版本
正确的脚本顺序是什么？
您可以使用单个脚本bootstrap.bundle.js或使用两个脚本popper.min.js并bootstrap.min.js使用jqueryandactivate-tooltip.js
activate-tooltip.js是一行来激活工具提示。参见步骤 3
工具提示依赖第 3 方库 Popper.js 进行定位。您必须在 bootstrap.js 之前包含 popper.min.js 或使用包含 Popper.js 的 bootstrap.bundle.min.js / bootstrap.bundle.js 才能使工具提示正常工作！
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="I'm a Working Tooltip">Hover me!</button>
我可以使用 Vanilla JS 代替 jQuery 吗？
是的，使用此代码。来自文档
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/activate-tooltip.js"></script>
// or
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/activate-tooltip.js"></script>
- Bootstrap 5 设计为在没有 jQuery 的情况下使用，您的步骤 2 不是最佳解决方案。 (2认同)
在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>
然后在body部分中,您需要编写以下代码
<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>
| 归档时间： |
|
| 查看次数： |
339413 次 |
| 最近记录： |