Tooltips

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left</button>

          	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</button>

          	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom</button>

          	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button>

Note:Tooltips have to be initialized with jQuery: select the specified element and call the tooltip() method. The following code will enable all tooltips in the document:

Simple popover

By default, the popover will appear on the right side of the element. Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>

          	<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>

          	<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
          	sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>

          	<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>

Note: Popovers have to be initialized with jQuery: select the specified element and call the popover() method. The following code will enable all popovers in the document:

Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover's body:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" title="Popover Header" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Click me</button>

Popovers Dismissible

<button type="button" class="btn btn-default" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</button>

Tip: If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of "hover":

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Hover me!</button>