表中 <i> 元素上的弹出框答案

【问题标题】：Popover on <i> elements within a Table表中 <i> 元素上的弹出框
【发布时间】：2016-08-14 19:46:24
【问题描述】：

我试图在表格中使用的一些字体很棒的图标上获得以下行为。

将鼠标悬停在图标上时，会显示一个弹出框，其中包含更多用户信息。

<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

【问题讨论】：

请张贴小提琴...谢谢
http://jsfiddle.net/zmug2y2q

标签： javascript css html twitter-bootstrap html-table

【解决方案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/

【讨论】：

那么简单的缺少关闭