jquery - Twitter Bootstrap：单击按钮时出现内容，但内容应显示在“悬停”上 - 请问有什么问题？

Question

使用 W3C Bootstrap popover 教程，我得到了以下代码。使用 Visual Studio，网页运行良好；但是，内容“为我的网站创建一个工具栏非常简单！” 应该在按钮悬停时显示（如这里的第一个演示：http: //www.w3resource.com/twitter-bootstrap/popover-tutorial.php）

但是，它没有 - 你必须点击按钮 - 为什么悬停不起作用？

我的项目根目录中有这三个文件：

<script src="js/jquery.js"></script>  
<script src="js/bootstrap-tooltip.js"></script>  
<script src="js/bootstrap-popover.js"></script> 

我尝试添加这样的触发器：

{ $("#example").popover({trigger: 'hover'});, 

但是，这也不起作用。

请问我错过了什么？

Answer 1

排序：Twitter Bootstrap 或 W3C 弹出框教程中没有提到我应该访问“js/bootstrap-popover.js”文件并将点击触发器更改为悬停以使悬停工作。

我偶然打开了 JS/bootstrap-popover.js 并注意到了这段代码：

   $.fn.popover.defaults = $.extend({}, $.fn.tooltip.defaults, {
    placement: 'right',
     trigger: 'click'

因此，我将触发器更改为悬停：

trigger: 'hover'

Answer 2

HTML

<a href="#" id="example" class="btn large primary" rel="popover">hover for popover</a>

JAVASCRIPT

var img = '<img src="" />';

$("#example").popover({ title: 'Look! A bird!', content: img });​​​

---

示例暴露于：http: //jsfiddle.net/weuWk/

现在适应你的问题！！