如何使用bootstrap彈出窗口顯示同級或子元素的內容？

Question

我正在嘗試讓引導程序彈出窗口基於正在使用彈出窗口設置的元素來顯示上下文內容。

下面是一些例子標記：

<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> 

腳本來設置酥料餅：

$('.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單獨的內容（在例子中，你正在設置相同的內容對所有popovers

例：

<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/

Answer 2

你可以離開他原來的標記和使用：

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