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" 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>
Options
dismissible
Add
triggers="focus"
to the
<button>
tag.
<button type="button" mdbBtn color="success" class="waves-light" mdbTooltip="Some tooltip text!" triggers="focus" mdbWavesEffect>
Tooltip on top
</button>
simple binding
Add
[tooltip]="content"
inside your
<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.
Here we go:
import { Component} from '@angular/core';
@Component({
selector: 'tooltip-dynamic-example',
templateUrl: 'tooltip-dynamic.html',
})
export class TooltipDynamicComponent {
public html: string = 'Your HTML here';
}
preconfigured
<button type="button" mdbBtn color="primary" class="waves-light" mdbTooltip="Some tooltip text!" mdbWavesEffect>
Preconfigured tooltip
</button>
simple hover
Add
triggers="mouseenter:click"
to the
<button>
tag.
<button type="button" mdbBtn color="info" class="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" mdbBtn color="success" class="waves-light" (click)="pop.show()" mdbWavesEffect>
Show
</button>
<button type="button" mdbBtn color="warning" class="waves-light" (click)="pop.hide()" mdbWavesEffect>
Hide
</button>
API Options
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" mdbBtn color="success" class="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. |
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" mdbBtn color="primary" class="waves-light" (click)="example.show()" mdbWavesEffect>
Show
</button>
<button type="button" mdbBtn color="success" class="waves-light" (click)="example.hide()" mdbWavesEffect>
Hide
</button>
API Reference:
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.
API Reference for MDB Angular Tooltip:
// For MDB Angular Pro
import { TooltipModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { TooltipModule, WavesModule } from 'angular-bootstrap-md'