Angular Bootstrap Tooltips

Angular tooltips - Bootstrap 4 & Material Design

Tooltips are a convenient way of presenting additional information to your user. They are tiny little clouds with a brief text message, triggered by clicking on specified element or hovering over it.

Examples

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. 


          Tight pants next level keffiyeh
          <a href="#" mdbTooltip="Basic tooltip" placement="top">you probably</a>
          haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table
          seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
          <a href="#" mdbTooltip="Another tooltip" placement="top">have a</a>
          terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel
          williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan
          <a href="#" mdbTooltip="Again, basic tooltip" placement="top">whatever keytar</a>
          ,scenester farm-to-table banksy Austin
          <a href="#" mdbTooltip="And the last tooltip" placement="top">twitter handle</a>
          freegan cred raw denim single-origin coffee viral.

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.



          <button type="button" mdbBtn color="primary" class="bwaves-light" mdbTooltip="Tooltip on top" placement="top"
          mdbWavesEffect>
          Tooltip on top
        </button>

        <button type="button" mdbBtn color="primary" class="waves-light" mdbTooltip="Tooltip on right" placement="right"
          mdbWavesEffect>
          Tooltip on right
        </button>

        <button type="button" mdbBtn color="primary" class="waves-light" mdbTooltip="Tooltip on bottom" placement="bottom"
          mdbWavesEffect>
          Tooltip on bottom
        </button>

        <button type="button" mdbBtn color="primary" class="waves-light" mdbTooltip="Tooltip on left" placement="left"
          mdbWavesEffect>
          Tooltip on left
        </button>

Custom HTML

You can use HTML to customize tooltip's title.



          <ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div></ng-template>
          <button type="button" class="btn btn-success waves-light" [mdbTooltip]="popTemplate" mdbWavesEffect>
            Show me tooltip with HTML
          </button>

        

          import { Component} from '@angular/core';

          @Component({
            selector: 'tooltip-dynamic-example',
            templateUrl: 'tooltip-dynamic.html',
          })

          export class TooltipDynamicComponent {
            public html: string = '<span class="btn btn-danger">Your HTML here</span>';
          }

Show and Hide

You can use the show() and hide() methods to manually toggle the tooltip. Rembember to pass the $event argument to the show() function.

This text has attached tooltip 



          <p>
            <span mdbTooltip="Hello there! I was triggered manually" triggers="" #pop="mdb-tooltip">
              This text has attached tooltip
            </span>
          </p>

          <button type="button" mdbBtn color="success" class="waves-light" (click)="pop.show($event)" mdbWavesEffect>
            Show
          </button>
          <button type="button" mdbBtn color="warning" class="waves-light" (click)="pop.hide()" mdbWavesEffect>
            Hide
          </button>

Modify tooltip height

Add .tooltip-inner { height: desired-value } to styles.scss stylesheet to change height of the tooltip.

Also remember to use customHeight input. This is required if the tooltip has no space to display along the top or bottom edge of the screen, and is displayed along the other way round.



        <button type="button" mdbBtn color="primary" class="waves-light" customHeight="50" mdbTooltip="Tooltip on top" placement="top" mdbWavesEffect>
          Tooltip on top
        </button>
        <button type="button" mdbBtn color="primary" class="fixed-bottom waves-light" customHeight="50" mdbTooltip="Tooltip on bottom" placement="bottom" mdbWavesEffect>
          Tooltip on bottom
        </button>

Angular Tooltips - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of tooltip directive.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

// For MDB Angular Pro
import { TooltipModule, ButtonsModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { TooltipModule, ButtonsModule, WavesModule } from 'angular-bootstrap-md'
Import example Modules list

Directives

TooltipDirective

Selector: mdbTooltip

Type: TooltipDirective

Inputs

Name Type Default Description Example
container string 'body' A selector specifying the element the tooltip should be appended to; at the present time only supports "body". container="body"
isDisabled boolean false Allows to disable tooltip. isDisabled="true"
isOpen boolean false Returns whether or not the tooltip is currently being shown. isOpen="true"
placement string - Placement of a tooltip; pick one of the accepted options: top, bottom, left, right. placement="top"
mdbTooltip string - The content of your tooltip. mdbTooltip="Tooltip content"
triggers string 'hover focus' Specifies the events that will be triggered. Supports a space separated list of event names. triggers="mouseenter:click"
delay number - Specifies the delay after which tooltip will be fired. delay="1000"
customHeight number - Specifies the height of the tooltip if was overwritten in scss. Used to determine if tooltip will fit to remaining space or not. customHeight="50"

Events

Name Type Description Example
hidden any Emits an event when the tooltip is hidden. (hidden)="onHidden()"
tooltipChange any Fired when tooltip content changes. (tooltipChange)="tooltipChange()"
shown any Emits an event when the tooltip is shown. (shown)="onShown()"

Methods

Below methods are available in TooltipDirective

Name Description
show(event?) Opens an element’s tooltip. This is considered a "manual" triggering of the tooltip.
hide() Closes an element’s tooltip. This is considered a "manual" triggering of the tooltip.
toggle(value: boolean) Toggles an element’s tooltip. This is considered a “manual” triggering of the tooltip.