Victoria Baker
Senior developer
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, bottom and left. The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip.
Top tooltip data-placement="top"
Some tooltip text!
Right tooltip data-placement="right"
Some tooltip text!
Bottom tooltip data-placement="bottom"
Some tooltip text!
Left tooltip data-placement="left"
Some tooltip text!
Tooltip examples
| Tooltip positions | ||
|---|---|---|
| Left tooltip position | Tooltip in left direction. To use, add data-placement="left" to the tooltip element |
|
| Top tooltip position | Tooltip in left direction. To use, add data-placement="left" to the tooltip element |
|
| Right tooltip position | Tooltip in default top direction, data-placement="top" is optional |
|
| Bottom tooltip position | Tooltip in bottom direction. 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 HTML support enabled. If false, jQuery's text method will be used to insert content into the DOM |
|
| Disabled animation | Add or remove a CSS fade transition to the tooltip by setting data-animation to 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 template option. To use, wrap .tooltip-arrow and .tooltip-inner in the div with a custom color class |
|
| Tooltip events | ||
| Show event | Example of a show event. This event fires immediately when the show instance method is called |
|
| Shown event | Example of a shown event. This event is fired when the tooltip has been made visible to the user |
|
| Hide event | Example of a hide event. This event is fired immediately when the hide instance method has been called |
|
| Hidden event | Example of a hidden event. This event is fired when the tooltip has finished being hidden from the user |
|
| Tooltip methods | ||
| Show method |
|
Example of a show method. This method reveals an element's tooltip. Tooltips with zero-length titles are never displayed |
| Hide method |
|
Example of a hide method. This method hides an element's tooltip. Hover on Target button and then click play button to hide a tooltip |
| Toggle method |
|
Example of a toggle method. This method toggles an element's tooltip. Click on play button to toggle Target button tooltip |
| Dispose method |
|
Example of a dispose method. This method hides and destroys an element's tooltip. Click on Target button and then play button to destroy a tooltip |
| Enable/Disable methods |
|
Example of a toggleEnabled method. Toggles the ability for an element’s tooltip to be shown or hidden. Hover on Target button and then play button 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, bottom and left. The popover plugin generates content and markup on demand, and by default places tooltips after their trigger element.
Top popover data-placement="top"
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare lacinia.
Right popover data-placement="right"
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare lacinia.
Bottom popover data-placement="bottom"
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare lacinia.
Left popover data-placement="left"
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare lacinia.
Popover examples
| Popover positions | ||
|---|---|---|
| Left popover position | Popover in left direction. To use, add data-placement="left" to the popover element. |
|
| Top popover position | Popover in top direction. To use, add data-placement="top" to the popover element. |
|
| Right popover position | Popover in default right direction, data-placement="right" is optional. |
|
| Bottom popover position | Popover in bottom direction. 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 HTML support enabled. If false, jQuery's text method will be used to insert content into the DOM. |
|
| Disabled animation | Add or remove a CSS fade transition to the popover by setting data-animation to 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 title color styling through template option. To use, add custom color class to .popover-title element. |
|
| Custom solid color | Besides title, popovers also support a solid color fill option. To use, add custom color class to .popover-title and .popover-content elements. |
|
| Popover events | ||
| Show event | Example of a show event. This event fires immediately when the show instance method is called. |
|
| Shown event | Example of a shown event. This event is fired when the popover has been made visible to the user. |
|
| Hide event | Example of a hide event. This event is fired immediately when the hide instance method has been called. |
|
| Hidden event | Example of a hidden event. This event is fired when the popover has finished being hidden from the user. |
|
| Popover methods | ||
| Show method |
|
Example of a show method. This method reveals an element's popover. Popovers whose both title and content are zero-length are never displayed. |
| Hide method |
|
Example of a hide method. This method hides an element's popover. Hover on Target button and then click play button to hide a popover. |
| Toggle method |
|
Example of a toggle method. This method toggles an element's popover. Click on play button to toggle Target button popover. |
| Dispose method |
|
Example of a dispose method. This method hides and disposes an element's popover. Click on Target button and then play button to dispose a popover. |
| Enable/Disable methods |
|
Example of a toggleEnabled method. Toggles the ability for an element’s popover to be shown or hidden. Hover on Target button and then play button to disable and enable a popover |