How to use the loader to display the contents of a child or child?

Question

I am trying to get a boot popover to display contextual content based on which element is being configured with popover.

Here is a markup example:

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

script to configure popover:

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

The expected result when hovering over the user class should be to show a popover displaying the content contained in the sibling or child userInfo .

My markup can be flexible; I can move the userInfo class as child, sibling, parent, etc.

Answer 1

Yes, I would put .userInfo inside .user , then .user over $('.user') and set the content for each .user (in your example, you set the same content for all popovers.

Example:

 <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() }); }); 

Here is the working jsfiddle (additional css added): http://jsfiddle.net/hajpoj/CTyyk/5/

Answer 2

You can leave your initial markup and use it:

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