如何使用bootstrap popover显示兄弟元素或子元素的内容？

Question

我试图让bootstrap popover显示基于使用popover设置的元素的上下文内容.

这是一些示例标记:

<div class="user">
    <img src="foo.jpg" />
</div>
<div class="userInfo">
    <p>He likes pie!</p>
</div>

<div class="user">
    <img src="bar.jpg" />
</div>
<div class="userInfo">
    <p>He likes cake!</p>
</div>

设置popover的脚本:

$('.user').popover({
    trigger: 'hover',
    placement: 'top',
    html: true,
    content: //What goes here?  I want to display the contents of the userInfo class
});

将鼠标悬停在user类上时的预期结果是显示一个弹出窗口,显示兄弟或子userInfo类中包含的内容.

我的标记可以灵活; 我可以把userInfo班级变成孩子,兄弟,父母等.

Answer 1

是的我会把.userInfo内部.user,然后迭代$('.user')并分别设置每个内容.user(在您的示例中,您为所有弹出窗口设置相同的内容.

例:

<div class="user">
  user 1
  <div class="userInfo">
    <p>He likes pie!</p>
  </div>
</div>

<div class="user">
  user 2
  <div class="userInfo">
    <p>He likes cake!</p>
  </div>
</div>

使用Javascript:

$('.user').each(function() {
  var $this = $(this);
  $this.popover({
    trigger: 'hover',
    placement: 'right',
    html: true,
    content: $this.find('.userInfo').html()  
  });
});

这是一个工作的jsfiddle(添加了一些额外的CSS):http: //jsfiddle.net/hajpoj/CTyyk/5/