JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div class="user">
    user 1
  <div class="userInfo">
    <p>He likes pie!</p>
</div>
</div>


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

CSS

.userInfo {
  display: none;
}
.user {
  width: 50px;
}

JavaScript

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