Popover - Click / Focus / Hover(optional but not for touch devices)

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by bizamajig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">

    <a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>

    <a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
    
    <input name="name" id="name" href="#" data-content="Popover on focus" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="focus" value="" />
    
</div>

CSS

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

.container {
    margin: 40px;
}

JavaScript

$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" });
$('#name').popover({ trigger: "focus hover"});