弹出表中的<i>元素

时间:2016-04-21 14:20:11

标签: javascript css html5 twitter-bootstrap html-table

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

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

<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

1 个答案:

答案 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/