我快疯了。
我有以下HTML:
<a href="#" rel="tooltip" title="A nice tooltip">test</a>
引导样式的工具提示拒绝显示，只是一个普通的工具提示。
我有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示例的源代码，在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作，还是我错过了一些重要的东西?
我有模态和警报和其他东西工作得很好，所以我不是一个完全的白痴;)
谢谢你的帮助!
你不需要分开所有的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>
就是这样……
Bootstrap 5.2 (2022)
有人想实现新的引导工具提示吗
步骤1
包括js
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
步骤2
包括这个脚本
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip()
})
为什么?
因为文档这么说:https://getbootstrap.com/docs/5.2/components/tooltips/#overview
由于性能原因，工具提示是可选择的，因此必须自己初始化它们。
步骤3
在代码中包含data-b -toggle="tooltip"。
<a href="#" data-bs-toggle="tooltip" title="A nice tooltip">test</a>
你不需要分开所有的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>
就是这样……
快速和更轻的选择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”组成。可以使用其他选择器选项。
希望能有所帮助。
