Tooltip component
Tooltip is a small text block with information about the item being hovered, clicked or focused on. Bootstrap tooltip extensions supports four alignment options: top, right, bottomand left. The tooltip plugin generates content and markup on demand, and by default places tooltips aftertheir trigger element. The required markup for a tooltip is only a dataattribute and titleon the HTML element you wish to have a tooltip.
Top tooltipdata-placement="top"
Right tooltipdata-placement="right"
Bottom tooltipdata-placement="bottom"
Left tooltipdata-placement="left"
Tooltip examples
| Tooltip positions | ||
|---|---|---|
| Left tooltip position |
Tooltip in leftdirection. To use, add data-placement="left"to the tooltip element
|
|
| Top tooltip position |
Tooltip in leftdirection. To use, add data-placement="left"to the tooltip element
|
|
| Right tooltip position |
Tooltip in default topdirection, data-placement="top"is optional
|
|
| Bottom tooltip position |
Tooltip in bottomdirection. To use, add data-placement="bottom"to the tooltip element
|
|
| Tooltip options | ||
| Click trigger |
Tooltip triggered on click. To use, add data-trigger="click"to the tooltip element. To hide tooltip, click the same button again
|
|
| Focus trigger |
Tooltip triggered on focus. To use, add data-trigger="focus"to the tooltip element. To hide tooltip, click outside the button
|
|
| HTML support |
Tooltip with HTMLsupport enabled. If false, jQuery's text method will be used to insert content into the DOM
|
|
| Disabled animation |
Add or remove a CSS fadetransition to the tooltip by setting data-animationto true(default) or false
|
|
| Delayed tooltip |
Delay showing and hiding the tooltip in ms. If a number is supplied, delay is applied to both hide/show
|
|
| Custom color |
Tooltips support custom color styling through templateoption. To use, wrap .tooltip-arrowand .tooltip-innerin the div with a custom color class
|
|
| Tooltip events | ||
| Show event |
Example of a showevent. This event fires immediately when the showinstance method is called
|
|
| Shown event |
Example of a shownevent. This event is fired when the tooltip has been made visible to the user
|
|
| Hide event |
Example of a hideevent. This event is fired immediately when the hideinstance method has been called
|
|
| Hidden event |
Example of a hiddenevent. This event is fired when the tooltip has finished being hidden from the user
|
|
| Tooltip methods | ||
| Show method |
|
Example of a showmethod. This method reveals an element's tooltip. Tooltips with zero-length titles are never displayed
|
| Hide method |
|
Example of a hidemethod. This method hides an element's tooltip. Hover on Targetbutton and then click playbutton to hide a tooltip
|
| Toggle method |
|
Example of a togglemethod. This method toggles an element's tooltip. Click on playbutton to toggle Targetbutton tooltip
|
| Dispose method |
|
Example of a disposemethod. This method hides and destroys an element's tooltip. Click on Targetbutton and then playbutton to destroy a tooltip
|
| Enable/Disable methods |
|
Example of a toggleEnabledmethod. Toggles the ability for an element’s tooltip to be shown or hidden. Hover on Targetbutton and then playbutton to disable and enable a tooltip
|
Popover component
Popover is a small container with content that hovers over its parent element. Since popovers are built on top of tooltip plugin, it is required to include both of them. Popover supports all availbale tooltip options, but has a different template - title, content and arrow. Bootstrap popover extension supports four alignment options: top, right, bottomand left. The popover plugin generates content and markup on demand, and by default places tooltips aftertheir trigger element.
Top popoverdata-placement="top"
Popover top
Right popoverdata-placement="right"
Popover right
Bottom popoverdata-placement="bottom"
Popover bottom
Left popoverdata-placement="left"
Popover left
Popover examples
| Popover positions | ||
|---|---|---|
| Left popover position |
Popover in leftdirection. To use, add data-placement="left"to the popover element.
|
|
| Top popover position |
Popover in topdirection. To use, add data-placement="top"to the popover element.
|
|
| Right popover position |
Popover in default rightdirection, data-placement="right"is optional.
|
|
| Bottom popover position |
Popover in bottomdirection. To use, add data-placement="bottom"to the popover element.
|
|
| Popover options | ||
| Hover trigger |
Popover triggered on hover. To use, add data-trigger="hover"to the popover element.
|
|
| Focus trigger |
Popover triggered on focus. To use, add data-trigger="focus"to the popover element. To hide popover, click outside the button.
|
|
| HTML support |
Popover with HTMLsupport enabled. If false, jQuery's text method will be used to insert content into the DOM.
|
|
| Disabled animation |
Add or remove a CSS fadetransition to the popover by setting data-animationto true(default) or false.
|
|
| Delayed popover |
Delay showing and hiding the popover in ms. If a number is supplied, delay is applied to both hide/show.
|
|
| Custom header color |
Popovers support custom titlecolor styling through templateoption. To use, add custom color class to .popover-titleelement.
|
|
| Custom solid color |
Besides title, popovers also support a solidcolor fill option. To use, add custom color class to .popover-titleand .popover-contentelements.
|
|
| Popover events | ||
| Show event |
Example of a showevent. This event fires immediately when the showinstance method is called.
|
|
| Shown event |
Example of a shownevent. This event is fired when the popover has been made visible to the user.
|
|
| Hide event |
Example of a hideevent. This event is fired immediately when the hideinstance method has been called.
|
|
| Hidden event |
Example of a hiddenevent. This event is fired when the popover has finished being hidden from the user.
|
|
| Popover methods | ||
| Show method |
|
Example of a showmethod. This method reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
|
| Hide method |
|
Example of a hidemethod. This method hides an element's popover. Hover on Targetbutton and then click playbutton to hide a popover.
|
| Toggle method |
|
Example of a togglemethod. This method toggles an element's popover. Click on playbutton to toggle Targetbutton popover.
|
| Dispose method |
|
Example of a disposemethod. This method hides and disposes an element's popover. Click on Targetbutton and then playbutton to dispose a popover.
|
| Enable/Disable methods |
|
Example of a toggleEnabledmethod. Toggles the ability for an element’s popover to be shown or hidden. Hover on Targetbutton and then playbutton to disable and enable a popover
|