Bootstrap 3.0弹出窗口和工具提示
Bootstrap 3.0弹出窗口和工具提示
提问于 2013-08-24 04:01:16
我是Bootstrap的新手，我在使用弹出窗口和工具提示功能时遇到了问题。我对下拉列表和模型没有问题，但我似乎遗漏了弹出窗口和工具提示的一些东西。
我得到了工具提示显示，但他们没有样式和位置像引导的例子。而且popover根本不起作用。
请看一看，让我知道我错过了什么。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/index.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p id="tool"class="muted" style="margin-bottom: 0;">
Tight pants next level keffiyeh
<a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
<h3>Live demo</h3>
<div style="padding-bottom: 24px;">
<a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function() {
$('.tool').tooltip();
$('.btn').popover();
}); //END $(document).ready()
</script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>
</body>
</html>回答 6
Stack Overflow用户
发布于 2013-08-24 04:47:55
我在所有页面上都使用此选项来启用工具提示
$(function () { $("[data-toggle='tooltip']").tooltip(); });Stack Overflow用户
发布于 2014-01-12 17:59:07
使用BOOTSTRAP 3:简短
Check - JS Fiddle
HTML
<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
</div>Javascript
$(function () {
$("[data-toggle='tooltip']").tooltip();
});Stack Overflow用户
发布于 2014-09-09 04:21:31
出于某种原因，我能够让我的代码工作的唯一方法是通过切换几个东西。如果到目前为止还没有对你起作用，请试一下这个：
$('body').popover({
selector: '[data-toggle="popover"]',
trigger: 'hover',
placement: 'right'
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18410922
复制相关文章
相似问题