Tooltips

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

Hover the link to see the tooltip 

        
            
            <p class="mb-0">
              Hover the link to see the
              <a href="#" mdbTooltip="Hi! I'm tooltip">tooltip</a>
            </p>

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 .disabled or disabled elements 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. 

        
            
            <button
              type="button"
              class="btn btn-secondary me-2"
              mdbTooltip="Tooltip on top"
              placement="top"
            >
              Tooltip on top
            </button>
            <button
              type="button"
              class="btn btn-secondary me-2"
              mdbTooltip="Tooltip on right"
              placement="right"
            >
              Tooltip on right
            </button>
            <button
              type="button"
              class="btn btn-secondary me-2"
              mdbTooltip="Tooltip on bottom"
              placement="bottom"
            >
              Tooltip on bottom
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              mdbTooltip="Tooltip on left"
              placement="left"
            >
              Tooltip on left
            </button>

And with custom HTML added:

        
            
            <button
              type="button"
              class="btn btn-secondary"
              mdbTooltip="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
              [html]="true"
            >
              Tooltip with HTML
            </button>

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. 

        
            
            <span class="d-inline-block" tabindex="0" mdbTooltip="Disabled tooltip">
              <button class="btn btn-primary" style="pointer-events: none" type="button" disabled>
                Disabled button
              </button>
            </span>

Tooltips - API

Import

        
            
          import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
          …
          @NgModule ({
            ...
            imports: [MdbTooltipModule],
            ...
          })

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 Description
tooltipShow Fires when show animation starts.
tooltipShown Fires when show animation ends.
tooltipHide Fires when hide animation starts.
tooltipHidden 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() 
        
            
              <p class="mb-0">
                Hover the link to see the
                <a href="#" mdbTooltip="Hi! I'm tooltip" #tooltip="mdbTooltip">tooltip</a>
              </p>
            
        
    
        
            
              import { Component, ViewChild } from '@angular/core';
              import { MdbTooltipDirective } from 'mdb-angular-ui-kit/tooltip';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
              })
              export class AppComponent {
                @ViewChild('tooltip') tooltip!: MdbTooltipDirective;

                ngAfterViewInit(): void {
                  this.tooltip.show();
                }
              }