我试图在表格中使用的某些字体很棒的图标上获得以下行为。
将鼠标悬停在图标上方时,会显示包含该用户更多信息的弹出框。
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/search.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/box.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
我以为我已经正确加载了脚本,但是当文件被放到服务器上时没有预期的响应(我检查了bootstrap.js,它确实包含了popover.js和tooltip.js作为代码部分。)
下面的pastebin中的是表格的一个版本,我删除了大部分行,同时仍然可以看到我的意图:http://pastebin.com/hYUBA711
(不想直接将它粘贴在原因表中总占用大量空间,即使这个小4行高,真正的表是16行)
编辑:奇怪的是,当我在jsfiddle上尝试时,它似乎确实按照我的意图工作,但实时网站不是......必须是一个不同的问题? JSFiddle http://jsfiddle.net/zmug2y2q
答案 0 :(得分:1)
将jquery代码放在jquery.js和bootstrap.js:
下<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<script type="text/javascript">
$(function() {
$('[data-toggle="popover"]').popover()
});
</script>
在jquery代码的末尾添加; :https://learn.jquery.com/using-jquery-core/document-ready/