我正在尝试在表格中使用的一些超赞字体图标上获得以下行为。
当鼠标悬停在图标上时，会为用户显示包含更多信息的弹出窗口。
<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
最佳答案
将您的 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/
关于javascript - 在表中的 <i> 元素上弹出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36772466/