Question

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

将鼠标悬停在图标上方时，会显示包含该用户更多信息的弹出框。

<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

Answer 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/

弹出表中的<i>元素

1 个答案: