Four options are available: top, right, bottom, and left aligned.
Add .top class for top tooltip along with .tooltip class.
Add .right class for right tooltip along with .tooltip class.
Add .bottom class for bottom tooltip along with .tooltip class.
Add .left class for left tooltip along with .tooltip class.
Four options are available: top, right, bottom, and left aligned.
Add data-toggle="tooltip" & data-placement="top" to add top tooltip.
Add data-toggle="tooltip" & data-placement="right" to add right tooltip.
Add data-toggle="tooltip" & data-placement="bottom" to add bottom tooltip.
Add data-toggle="tooltip" & data-placement="left" to add left tooltip.
This event fires immediately when the show instance method is called.
This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
This event is fired immediately when the hide instance method has been called.
This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.
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)
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).
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).
Hides and destroys an element’s tooltip. Tooltips that use delegation cannot be individually destroyed on descendant trigger elements.
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.
Use data-trigger="click" for click trigger.
Use data-trigger="focus" for focus trigger.
Use data-trigger="hover" for hover trigger. This is a default trigger.
Use data-trigger="manual" for manual trigger. You can do show/hide using js
Use data-animation="false" to remove fade animation. Default is true.
Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type.
Use data-html="true" for HTML supported trigger.
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.
Use data-popup="tooltip-custom" for Custom tooltip. You can change tooltip color using data-bg-color attribute.
Use data-popup="tooltip-custom" for Custom tooltip. You can change tooltip text color using data-text-color attribute.
Use data-popup="tooltip-custom" for Custom bordered colored tooltip. You can change tooltip background and text color using data-bg-color and data-text-color attributes.