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" tooltip="Tooltip on top" placement="top" ripple-radius>
Tooltip on top
</button>
<button type="button" class="btn btn-primary" tooltip="Tooltip on right" placement="right" ripple-radius>
Tooltip on right
</button>
<button type="button" class="btn btn-primary" tooltip="Tooltip on bottom" placement="bottom" ripple-radius>
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary" tooltip="Tooltip on left" placement="left" ripple-radius>
Tooltip on left
</button>
Options
dismissible
Add triggers="focus"
to the <button>
tag.
<button type="button" class="btn btn-success" tooltip="Some tooltip text!" triggers="focus" ripple-radius>
Tooltip on top
</button>
simple binding
Add[tooltip]="content"
inside your <button>
.
<button type="button" class="btn btn-info" [tooltip]="content" ripple-radius>
Simple binding
</button>
Data structure:
export class AppComponent {
public content: string = 'Add your content here';
}
dynamic HTML
Create <ng-template>
tag and place [tooltip]="popTemplate"
inside your <button>
tag.
<ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div></ng-template>
<button type="button" class="btn btn-success" [tooltip]="popTemplate" ripple-radius>
Show me tooltip with HTML
</button>
Data structure:
export class AppComponent {
public html: string = '<span class="btn btn-danger">Your HTML here</span>';
}
preconfigured
<button type="button" class="btn btn-primary" tooltip="Some tooltip text!" ripple-radius>
Preconfigured tooltip
</button>
simple hover
Add triggers="mouseenter:click"
to the <button>
tag.
<button type="button" class="btn btn-info" tooltip="I will hide on click" triggers="mouseenter:click" ripple-radius>
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 tooltip="Hello there! I was triggered manually" triggers="" #pop="bs-tooltip">
This text has attached tooltip
</span>
</p>
<button type="button" class="btn btn-success" (click)="pop.show()" ripple-radius>
Show
</button>
<button type="button" class="btn btn-warning" (click)="pop.hide()" ripple-radius>
Hide
</button>
API Reference
TooltipDirective
Selector | [tooltip], [tooltipHtml] |
Exported as | bs-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". |
tooltip |
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"
tooltip="Click!"
triggers="mouseenter:click">
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. |
Example:
<button (onShown)="onShown()" (onHidden)="onHidden()" type="button" class="btn btn-success"
tooltip="I'm a tooltip!">
Hover here!
</button>
export class AppComponent {
public onShown(): void {
console.log('can be seen')
}
public onHidden(): void {
console.log("can not be seen")
}
}
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 tooltip="I can show and hide on click."
triggers="" #example="bs-tooltip">
Text with attached tooltip
</span>
</p>
<button type="button" class="btn btn-primary" (click)="example.show()">
Show
</button>
<button type="button" class="btn btn-success" (click)="example.hide()">
Hide
</button>