Question

点击链接时我需要显示bootstrap popover。我有这个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>

现在，这个popover工作但不显示隐藏的内容！我怎么能解决这个问题？

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输出为：

when I mouseover to link all content is for Tasks not for tasks 1, tasks 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

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

1 个答案: