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 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. 
        
            
            <p class="mb-0">
              Hover the link to see the
              <a href="#" mdbTooltip="Hi! I'm tooltip" (tooltipShow)="onTooltipShow($event)"
                >tooltip</a
              >
            </p>                              
            
        
    
        
            
            import { Component } 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 {
              onTooltipShow(event: MdbTooltipDirective): void {
                console.log('tooltip show: ', event);
              }
            }

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();
                }
              }

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. 

        
            
        // .tooltip
        --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
        --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
        --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
        --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
        --#{$prefix}tooltip-margin: #{$tooltip-margin};
        --#{$prefix}tooltip-color: #{$tooltip-color};
        --#{$prefix}tooltip-bg: #{$tooltip-bg};
        --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
        --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
        --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
        --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

        --#{$prefix}tooltip-font-size: #{$tooltip-font-size};

SCSS variables

        
            
        $tooltip-max-width: 200px;
        $tooltip-opacity: 0.9;
        $tooltip-margin: null;

        $tooltip-color: #fff;
        $tooltip-padding-y: 6px;
        $tooltip-padding-x: 16px;
        $tooltip-font-size: 14px;
        $tooltip-bg: #6d6d6d;
        $tooltip-border-radius: 0.25rem;