javascript - bootstrap popover不显示隐藏的内容包装器

Question

我需要在单击链接时显示 Bootstrap 弹出窗口。我有这个 JS 代码:

$(function(){

    $('[data-toggle=popover].tasks-menu').popover({ 
        trigger:'hover', // want to show in click change trigger:'click'
        html : true, 
        content: function() {
          return $('#popover_content_wrapper').html();
        }
    });

});

HTML:

<a class="tasks-menu" data-toggle="popover" data-placement="bottom">Tasks</a>

<div id="popover_content_wrapper" style="display:none">test Now</div>

现在，这个弹出窗口有效，但不显示隐藏内容!我该如何解决这个问题？

DEMO LINK

已编辑:我用 Sridhar R 修复了此错误。现在我有另一个问题:

我把这个 html 放入 PHP 循环中。这有效，但输出不正确。我需要为每个动态标题显示工具提示隐藏内容，如下所示:

<a class="tasks-menu" data-toggle="popover" data-placement="bottom">Tasks</a>

<div id="popover_content_wrapper" style="display:none">test Now</div>

<a class="tasks-menu" data-toggle="popover" data-placement="bottom">Tasks1</a>

<div id="popover_content_wrapper" style="display:none">test Now 1</div>

<a class="tasks-menu" data-toggle="popover" data-placement="bottom">Tasks2</a>

<div id="popover_content_wrapper" style="display:none">test Now 2</div>

<a class="tasks-menu" data-toggle="popover" data-placement="bottom">Tasks3</a>

<div id="popover_content_wrapper" style="display:none">test Now 3</div>

FALSE 输出是:

当我将鼠标悬停链接时，所有内容都是针对任务的，而不是针对任务 1、任务 2 ......

我该如何解决这个问题？

Answer 1

试试这个

$(function(){

    $('[data-toggle=popover].tasks-menu').popover({ 
        trigger:'hover', // want to show in click change trigger:'click'
        html : true, 
        content: function() {
          return $('#popover_content_wrapper').html();
        }
    });

});

DEMO

更新

$(function(){

    $('[data-toggle=popover].tasks-menu').popover({ 
        trigger:'hover',
        html : true, 
        content: function() {
          return $(this).next('#popover_content_wrapper').html();
        }
    });

});

DEMO