gpt4 book ai didi

javascript - 如何使 Bootstrap 3 工具提示与文档中的显示相同

转载 作者:数据小太阳 更新时间:2023-10-29 05:50:08 24 4
gpt4 key购买 nike

在 Twitter Bootstrap 3 上,当您查看工具提示时,它如下所示。

This is what appears on the Documentation

当我尝试这样做时。这就是工具提示的显示方式。

enter image description here

这是我使用的代码。

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

更新

这是我的JS代码

$('#tooltip1').tooltip('options')

最佳答案

您需要将 Tooltip on left 放在 data-original-title="Tooltip on left"id="tooltip1" 中以匹配您的脚本。

<button id="tooltip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">
Tooltip on left
</button>

它不起作用,因为您的脚本引用了您没有的 ID 和“选项”作为字符串。选项应为空白或类似“显示”或“隐藏”的内容,但在您的情况下它将为空白。

改变:

$('#tooltip1').tooltip('options')

到:

$('#tooltip1').tooltip();

一定要包括分号。

更新:这是一个简单的例子

<html lang="en">
<head>
<title>
Bootstrap Tool-Tip preview
</title>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-6">
<button data-original-title="Tooltip on left" data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" id="tooltip1">
Tooltip on left
</button>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script id="bsJs" type="text/javascript">
$(document).ready(function() {
$('#tooltip1').tooltip();
});
</script>
</body>
</html>

参见示例:bootply

关于javascript - 如何使 Bootstrap 3 工具提示与文档中的显示相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19352768/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com