Jump to: navigation, search

Bootstrapskin Pop Overs

Pop Overs

Click to toggle popover
Popover on left
Popover on top
Popover on bottom
Popover on right

Headed Pop over

Pop overs are a useful method of advising the reader of important information.

In the following examples take not of data-placement="right" and title.

Also see below how to create text and image based pop overs.

<div class="btn btn-lg btn-info" data-toggle="popover" data-placement="right" title="Pop Over" data-content="And here's some amazing content. It's very engaging. right?" role="button" data-original-title="A Title">Click to toggle popover</div>

Pop over

<div class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on left</div>

Text Based Popover

<p class="justify">This is a <span class="" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">'''Text Based'''</span> pop over, and to the right <i class="fa fa-hand-o-right"></i> is an imaged based pop over.</p>

Image Based Popover

<div class="" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">http://megamenu.sourceforge.net/images/Third.jpg</div>

No Tips at this time, no doubt this will change!

bootstrapskin-commercial-skin.png