Bootstrap工具提示不能显示在悬停上
问题描述:
我试过几种不同的方式来获取Bootstrap工具提示工作。我似乎无法找到这个问题。我之前使用过Bootstrap工具提示,看起来我总是遇到一个让他们走的问题。我在这里错过了很明显的东西吗我没有收到任何JS错误或任何东西。Bootstrap工具提示不能显示在悬停上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Links</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery
<script type='text/javascript' src='js/jquery-2.1.1.min.js'></script> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type='text/css'>
</style>
</head>
<body>
<div class="container" style='text-align:center;'>
<h1>Quick Links</h1>
<div class='well'>
Quick links
</div>
<div>
<div class='row'>
<div class='col-md-3 hidden-xs'>
</div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3 hidden-xs'>
</div>
</div> </div>
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.qtooltip').tooltip({'placement': 'top'});
});
</script>
</body>
</html>
答
我发现了这个问题。
在这里工作的小提琴:http://jsfiddle.net/8dfwcL98/
你的情况,你忘了标题属性添加到您的元素。标题是作为工具提示显示的内容。
<a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca' title="Awesome Tooltip">google</a>
+0
就是这样。我使用PHP来生成标题,所以我想我已经键入了它(这是首先想到的)。我没有注意到我没有把它放到实际的HTML中。谢谢。 – muttley91 2014-10-26 23:57:13
如果在控制台中键入:$('[data-toggle =“tooltip”]'),它是否会返回正确的元素? – JanR 2014-10-26 23:44:04
是的,当我输入我的选择器时,所有正确的元素都显示出来。 – muttley91 2014-10-26 23:47:41
我修改了我的代码以使其具有更简单的选择器(并将其添加到HTML元素中),但它仍然无效。 – muttley91 2014-10-26 23:48:33