Tooltip overview

NbTooltipDirective

Tooltip directive for small text/icon hints.

Installation

Import NbTooltipModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbTooltipModule,
  ],
})
export class PageModule { }

Usage

Tooltip can accept a hint text and/or an icon:

Same way as Popover, tooltip can accept placement position with nbTooltipPlacement property:

It is also possible to specify tooltip color using nbTooltipStatus property:

Tooltip has a number of triggers which provides an ability to show and hide the component in different ways:

• Click mode shows the component when a user clicks on the host element and hides when the user clicks somewhere on the document outside the component.
• Hint provides capability to show the component when the user hovers over the host element and hide when the user hovers out of the host.
• Hover works like hint mode with one exception - when the user moves mouse from host element to the container element the component remains open, so that it is possible to interact with it content.
• Focus mode is applied when user focuses the element.
• Noop mode - the component won't react to the user interaction.

NbTooltipComponent

Tooltip container. Renders provided tooltip inside.