Main tutorial Simple tooltip

More tutorial

More demos

Positions data-location

top-left top top-right
left-top right-top
left right
left-bottom right-bottom
bottom-left bottom bottom-right

Triggers data-trigger

trigger Description
click data-trigger="click"
It attaches the click event to the target and toggles the visibility of tooltip on clicking the target element. It also hides the tooltip when user clicks anywhere on rest of the web page.
hover daat-trigger="hover"
It is the default behavior that shows/hides the tooltip on mouse over and mouse out event.
hoverable data-trigger="hoverable"
It allows to show the tooltip on mouse over event of target element. The tooltip remains in visible state until the user moves the mouse pointer over and then out of the hoverable tooltip balloon.
It attaches the focus/blur event to target form input elements. The tooltip appears when focus event of the input contol fires and hides on blur.