我快疯了。
我有以下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示例的源代码,在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作,还是我错过了一些重要的东西?
我有模态和警报和其他东西工作得很好,所以我不是一个完全的白痴;)
谢谢你的帮助!
在头部部分,您需要首先添加以下代码
<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>
工具提示和弹出窗口不仅仅是css插件,比如下拉菜单或进度条。要使用工具提示和弹出窗口,你必须使用jquery(阅读javascript)激活它们。
假设我们想要在点击html按钮时显示一个弹出窗口。
<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代码来激活弹出窗口:
$('.popovers-to-be-activated').popover();
实际上,上面的javascript代码将在所有具有类“popover -to- activated”的html元素上激活弹出窗口。
不用说,把上面的javascript放在DOM-ready回调中,一旦DOM准备好就激活所有弹出窗口:
$(function() {
// Handler for .ready() called.
$('.popovers-to-be-activated').popover();
});
在头部部分,您需要首先添加以下代码
<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>