Bootstrap 弹出框仅适用于悬停答案

【问题标题】：Bootstrap popover only works on hoverBootstrap 弹出框仅适用于悬停
【发布时间】：2016-04-19 03:13:45
【问题描述】：

我一直很难让 Bootstraps 弹出窗口在点击时而不是在悬停时显示。我查看了此页面上的示例。 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h

我已经复制了示例中的确切脚本 src 链接以及元和链接行。我也初始化弹出框无济于事。这是我正在使用的简化版本。

    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <link rel="stylesheet" type ="text/css" href="style.css" />     
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta charset="utf-8"> 
            
    </head>           
    <body>
                    <div id="container">
                        <a href="#" data-toggle="popover" title="Popover Header" data-trigger="click" data-content="Some content inside the popover">Toggle popover</a>
                    </div>
                    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                    <script>
                                $(document).ready(function(){
                                        $('[data-toggle="popover"]').popover();   
                                });
                    </script>
               </body>

我不知道这是否正常，但我尝试打开页面，右键单击 a 元素并单击检查（在 chrome 中）。右下角显示两个错误。

未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery

未捕获的类型错误：$(...).popover 不是函数

找不到JQuery？它肯定在那里。当我将鼠标悬停在该元素上时，该元素会显示并且文本会读取，当我单击它时没有任何反应。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

首先包含 jQuery 脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

此错误在页面加载时记录到控制台：

    Uncaught Error: Bootstrap's JavaScript requires jQuery

意思是引导js正在寻找jquery对象。

【讨论】：