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">
<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<svg>
<circle id = "born" class = "medium" cx = "55%" cy = "60%" r = "15%"  stroke = "lightblue" stroke-width = "0.5%" fill = "url(#born)"/>
<svg>

JavaScript

$.fn.popover.Constructor.DEFAULTS.trigger = "hover";   // Set the default trigger to hover
$.fn.popover.Constructor.DEFAULTS.placement = 'right'; // Set the default placement to right
$.fn.popover.Constructor.DEFAULTS.html = true;
$.fn.popover.Constructor.DEFAULTS.container = "body";

	
$("circle#born").popover({
    title: "My Hello World!",
    content: "I was born in Tulung Agung, Indonesia. Back then, my mom presumed my mole as dirt, later on she realized that it would be my unique identifier."
}).on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(this).parents("body").find(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$("body .popover:hover").length) {
            $(_this).popover("hide")
        }
    }, 100);
});