引导程序工具提示悬停时不显示
Bootstrap Tooltips Not Displaying On Hover
我尝试了几种不同的方法来让引导工具提示工作。我似乎找不出这是怎么回事。我以前使用过Bootstrap工具提示,似乎总是在启动它们时遇到问题。我是不是遗漏了一些显而易见的东西?我没有得到任何JS错误或任何东西。
<!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/
在您的情况下,您忘记将title属性添加到元素中。标题是显示为工具提示的内容。
<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>
相关文章:
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 有问题的突出显示(悬停)一个系列,突出显示图表
- 下拉显示悬停选项
- 图表JS未显示悬停时的小数据
- 传单显示悬停时的地图 - 地图加载不正确
- 如何使用 Javascript 将鼠标悬停在元素上显示悬停
- 使链接保持活动状态,使用 JavaScript 在单击时显示悬停效果
- Jquery 隐藏/显示 悬停时反复发生
- 仅高亮显示悬停的可丢弃项或放置到的项目
- chartjs显示悬停在折线图上的点
- 如何在Javascript中显示悬停类
- 如何在网站的samrtphone中显示悬停帮助
- Don't在触摸设备上显示悬停状态
- 在ace中显示悬停光标的工具提示
- 显示悬停图像
- 事件,用于突出显示悬停元素
- 如何在基本面上突出显示悬停时的gmap标记
- 防止超链接的触摸和显示悬停状态
- 是否有一种方法来显示悬停/工具提示信息,当我鼠标在spotfire可视化标题
- 在没有javascript的情况下显示悬停子菜单