Bootstrap Tooltip

The Tooltip plugin is small pop-up box that appears when the user hover the mouse pointer over an element.

Hover Me      Hover Me Again!

<button class="btn btn-success" data-toggle="tooltip" title="ToolTip Contents">Hover Me</button>

Note: Tooltips must be initialized with jQuery.

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

Positioning Tooltips

By default, the tooltip will appear on top of the element. Use data-placement="left" attribute to set the position of the tooltip. Value can be top(default), bottom, left, right and auto.

Left Tooltip       Right Tooltip       Bottom Tooltip       Top Tooltip      Auto Right Tooltip

ToolTip Option

Name	Description
Delay	Specifies the number of milliseconds it will take to show and hide the tooltip.
trigger	Specifies how the tooltip is triggered.

Delay Syntax

$('.btn-success').tooltip({title: "myToolTip", delay: 1000}); 
$('.btn-success').tooltip({title: "myToolTip", delay: {show: 500, hide: 100}});

Trigger Syntax

$('.btn-success').tooltip({title: "myToolTip", trigger: "click"}); 
$('.btn-success').tooltip({title: "myToolTip", trigger: "hover"}); 
$('.btn-success').tooltip({title: "myToolTip", trigger: "focus"}); 

Bootstrap Popover Plugin

The Popover plugin is similar to tooltips, it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content than tooltip.

Positioning Popovers

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, right and auto.