JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<p class="entry" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">Lorem Ipsum</p>
<p class="entry" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">Lorem Ipsum2</p>

CSS

.entry {max-width:150px;height:100px}

JavaScript

$(document).ready(function(){
    $('p.entry').each(function (){
        var i = $(this);            
        $(i).bind('mouseenter', function(){
            i.popover({
                html:true,
                title:i.html(),
                content:'Loading'
            }).popover('show');   
            $.ajax({
                type: "POST",
                url: "/echo/json/",
                data: {
                    json: JSON.stringify({
                        text: 'new Data to replace existing content',
                        par1: 'another text'
                    }),
                    delay: 3
                },
                cache: false,
                success: function(data) {
                     var popover = i.data('popover');
                     popover.options.content = data.text;    
                     i.popover('show');
                }
            });
        });
        $(i).bind('mouseleave', function(){
            i.popover('hide');
        });
    });
});