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:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({animation: true, delay: {show: 300, hide: 300}});
});
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:
$(document).ready(function(){
$('[data-toggle="popover"]').popover({animation: true, delay: {show: 100, hide: 100}});
});