Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<a href="#" data-poload="/echo/js/?js=Response_<b>content</b>&delay=1">HOVER HERE</a>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

JavaScript

// On first hover event we will make popover and then AJAX content into it.
    $('[data-poload]').hover(
        function (event) {
            var el = $(this);

            // disable this event after first binding 
            el.off(event);

            // add initial popovers with LOADING text
            el.popover({
                content: "loading…", // maybe some loading animation like <img src='loading.gif />
                html: true,
                placement: "auto",
                container: 'body',
                trigger: 'hover'
            });

            // show this LOADING popover
            el.popover('show');

            // requesting data from unsing url from data-poload attribute
            $.get(el.data('poload'), function (d) {
                // set new content to popover
                el.data('bs.popover').options.content = d;

                // reshow popover with new content
                el.popover('show');
            });
        },
        // Without this handler popover flashes on first mouseout
        function() { }
    );