Angular Tooltips with Bootstrap - free examples & tutorial
Angular Bootstrap 5 Tooltips component
Documentation and examples for adding custom tooltips.
Note: Read the API tab to find all available options and advanced customization
Basic example
Overview
Things to know when using the tooltip plugin:
- Tooltips are opt-in for performance reasons, so you must initialize them yourself.
- Tooltips with zero-length mdbTooltip are never displayed.
- Triggering tooltips on hidden elements will not work.
-
Tooltips for
.disabledordisabledelements must be triggered on a wrapper element. - Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.
Four directions
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
And with custom HTML added:
Disabled elements
Elements with the disabled attribute aren’t interactive, meaning users cannot
focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want
to trigger the tooltip from a wrapper <div> or <span>,
ideally made keyboard-focusable using tabindex="0", and override the
pointer-events on the disabled element.
Tooltips - API
Import
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
animation |
Boolean | true |
Apply a fade transition to the tooltip |
delayShow |
Number | 0 |
Delay showing the tooltip (ms) |
delayHide |
Number | 0 |
Delay hiding the tooltip (ms) |
html |
Boolean | false |
Allow HTML in the tooltip. |
placement |
String | 'top' |
How to position the tooltip - top | bottom | left | right |
trigger |
String | 'click' |
How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger. |
offset |
Number | 0 |
Offset of the tooltip relative to its target |
Outputs
| Name | Type | Description |
|---|---|---|
tooltipShow |
EventEmitter<MdbTooltipDirective> | Fires when show animation starts. |
tooltipShown |
EventEmitter<MdbTooltipDirective> | Fires when show animation ends. |
tooltipHide |
EventEmitter<MdbTooltipDirective> | Fires when hide animation starts. |
tooltipHidden |
EventEmitter<MdbTooltipDirective> | Fires when hide animation ends. |
Methods
| Name | Description | Example |
|---|---|---|
hide |
Manually closes a tooltip |
tooltip.hide()
|
show |
Manually opens a tooltip |
tooltip.show()
|
toggle
|
Manually toggle a tooltip |
tooltip.toggle()
|
CSS variables
As part of MDB’s evolving CSS variables approach, tolltips now use local CSS variables on
.tooltip for enhanced real-time customization. Values for the CSS variables
are set via Sass, so Sass customization is still supported, too.