Angular Bootstrap tooltip

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.

They significantly increase User Experience, especially with advanced UI elements, which often require additional explanation.

Examples

Four options are available: top, right, bottom, and left aligned.

Add placement="top/left/bottom/right" to the <button> tag.



<button type="button" class="btn btn-primary waves-light" mdbTooltip="Tooltip on top" placement="top" mdbWavesEffect>
  Tooltip on top
</button>

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

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

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

Options

dismissible

Add triggers="focus" to the <button> tag.


<button type="button" class="btn btn-success waves-light" mdbTooltip="Some tooltip text!" triggers="focus" mdbWavesEffect>
  Tooltip on top
</button>

simple binding

Add [tooltip]="content" inside your <button>.


<button type="button" class="btn btn-info waves-light" [mdbTooltip]="content" mdbWavesEffect>
  Simple binding
</button>
                    

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

@Component({
  selector: 'tooltip-binding-example',
  templateUrl: 'tooltip-binding.html',

})

export class TooltipBindingComponent {

  public content: string = 'Add your content here';

}

dynamic HTML

Create <ng-template> tag and place [mdbTooltip]="popTemplate" inside your <button>tag.


<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>';

}

preconfigured


<button type="button" class="btn btn-primary waves-light" mdbTooltip="Some tooltip text!" mdbWavesEffect>
  Preconfigured tooltip
</button>

simple hover

Add triggers="mouseenter:click" to the <button> tag.


<button type="button" class="btn btn-info waves-light" mdbTooltip="I will hide on click" triggers="mouseenter:click" mdbWavesEffect>
  Hover over me!
</button>

show and hide

Create your own element with tooltip inside and add (click)="pop.show() and (click)="pop.hide()" to your buttons.


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

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

API Reference

TooltipDirective

Selector [mdbTooltip]
Exported as mdb-tooltip

Inputs

container Type: string
A selector specifying the element the tooltip should be appended to; at the present time only supports "body".
[isDisabled] Type: boolean
Allows to disable tooltip.
[isOpen] Type: boolean
Returns whether or not the tooltip is currently being shown.
placement Type: string
Placement of a tooltip; pick one of the accepted options: "top", "bottom", "left", "right".
mdbTooltip Type: string
The content of your tooltip.
triggers Type: string
Specifies the events that will be triggered. Supports a space separated list of event names.

Example:


<button type="button" class="btn btn-success waves-light"
        mdbTooltip="Click!"
        triggers="mouseenter:click" mdbWavesEffect>
  Hover here!
</button>

Outputs

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

<button (onShown)="onShown()" (onHidden)="onHidden()" type="button" class="btn btn-success waves-light"
        mdbTooltip="I'm a tooltip!" mdbWavesEffect>
  Hover here!
</button> 
                    

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

@Component({
  selector: 'tooltip-output-example',
  templateUrl: 'tooltip-output.html',

})

export class TooltipOutputComponent {
    public onShown(): void {
        console.log('can be seen')
    }
    public onHidden(): void {
        console.log("can not be seen")
    }
}

Example:


Methods

(event)="name.show()" Return type: void
Opens an element’s tooltip. This is considered a "manual" triggering of the tooltip.
(event)="name.hide()" Return type: void
Closes an element’s tooltip. This is considered a "manual" triggering of the tooltip.
(event)="name.toggle(value: boolean)()" Return type: void
Toggles an element’s tooltip. This is considered a “manual” triggering of the tooltip.

Example:


<p>
  <span mdbTooltip="I can show and hide on click."
        triggers="" #example="mdb-tooltip">
    Text with attached tooltip
  </span>
</p>
 
<button type="button" class="btn btn-primary waves-light" (click)="example.show()" mdbWavesEffect>
  Show
</button>
<button type="button" class="btn btn-success waves-light" (click)="example.hide()" mdbWavesEffect>
  Hide
</button>