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;