Static demo
Four options are available: top, right, bottom, and left aligned.
Basic Top Tooltip
Add .top class for top tooltip along with .tooltip class.
Basic Right Tooltip
Add .right class for right tooltip along with .tooltip class.
Basic Bottom Tooltip
Add .bottom class for bottom tooltip along with .tooltip class.
Basic Left Tooltip
Add .left class for left tooltip along with .tooltip class.
Tooltip Positions
Four options are available: top, right, bottom, and left aligned.
Basic Top Tooltip
Add data-toggle="tooltip" & data-placement="top" to add top tooltip.
Basic Right Tooltip
Add data-toggle="tooltip" & data-placement="right" to add right tooltip.
Basic Bottom Tooltip
Add data-toggle="tooltip" & data-placement="bottom" to add bottom tooltip.
Basic Left Tooltip
Add data-toggle="tooltip" & data-placement="left" to add left tooltip.
Tooltip Triggers
Tooltip is triggered using - click | hover | focus | manual options. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.
Click
Use data-trigger="click" for click trigger.
Focus
Use data-trigger="focus" for focus trigger.
Hover
Use data-trigger="hover" for hover trigger. This is a default trigger.
Manual
Use data-trigger="manual" for manual trigger. You can do show/hide using js
Tooltip Options
Disabled Animaition
Use data-animation="false" to remove fade animation. Default is true.
Delay Show/Hide
Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type.
Supports HTML
Use data-html="true" for HTML supported trigger.
Tooltip Template
Base HTML to use when creating the tooltip. The tooltip's title will be injected into the .tooltip-inner. .tooltip-arrow will become the tooltip's arrow.The outermost wrapper element should have the .tooltip class.
Tooltip Methods
This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.
Show
Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown.(i.e. before the shown.bs.tooltip event occurs)
Hide
Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs).
Toggle
Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs).
Dispose
Hides and destroys an element’s tooltip. Tooltips that use delegation cannot be individually destroyed on descendant trigger elements.
Tooltip Events
Show Event
This event fires immediately when the show instance method is called.
Shown Event
This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
Hide Event
This event is fired immediately when the hide instance method has been called.
Hidden Event
This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
