Angular Tooltip Component

Tooltip

Documentation and examples for adding Angular Tooltips.

Available in Other JavaScript Frameworks

CoreUI Angular Tooltip Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Use CoreUI Angular tooltip directive to create beautiful tooltips and present hint or information regarding the element on hover. Tutorials and examples for adding custom CoreUI Angular tooltips.

Examples

Base tooltips

Hover over the links below to see tooltips:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { TooltipDirective } from '@coreui/angular';

@Component({
  selector: 'docs-tooltip-base-tooltips',
  templateUrl: './tooltip-base-tooltips.component.html',
  imports: [TooltipDirective, RouterLink]
})
export class TooltipBaseTooltipsComponent {}

<p class="text-medium-emphasis">
  Tight pants next level keffiyeh
  <a cTooltip="Tooltip text" [cTooltipVisible]="true" routerLink> you probably </a>
  haven&#39;t heard of them. Photo booth beard raw denim letterpress vegan messenger
  bag stumptown.
  <a cTooltip="Tooltip text" routerLink>Twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>

Directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.

import { Component } from '@angular/core';
import { ButtonDirective, TooltipDirective } from '@coreui/angular';

@Component({
  selector: 'docs-tooltip-directions',
  templateUrl: './tooltip-directions.component.html',
  imports: [ButtonDirective, TooltipDirective]
})
export class TooltipDirectionsComponent {
  tooltipText = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
}

<button cButton [cTooltip]="tooltipText" cTooltipPlacement="top" class="me-1" color="secondary">
  Tooltip on top
</button>
<button cButton [cTooltip]="tooltipText" cTooltipPlacement="right" class="me-1" color="secondary">
  Tooltip on right
</button>
<button cButton [cTooltip]="tooltipText" cTooltipPlacement="bottom" class="me-1" color="secondary">
  Tooltip on bottom
</button>
<button cButton [cTooltip]="tooltipText" cTooltipPlacement="left" class="me-1" color="secondary">
  Tooltip on left
</button>

Html content

Use ng-template to render html content and / or non default triggers (click).

import { Component } from '@angular/core';
import { ButtonDirective, TextColorDirective, TooltipDirective } from '@coreui/angular';

@Component({
  selector: 'docs-tooltip-html-content',
  templateUrl: './tooltip-html-content.component.html',
  imports: [ButtonDirective, TooltipDirective, TextColorDirective]
})
export class TooltipHtmlContentComponent {}

<button
  [cTooltip]="tooltipContent"
  cButton
  cTooltipPlacement="right"
  cTooltipTrigger="click"
  class="me-1"
  color="secondary">
  Template Tooltip
  <ng-template #tooltipContent>
    Vivamus <span cTextColor="success">sagittis</span> lacus vel augue laoreet
    rutrum <i cTextColor="warning">faucibus</i>.
  </ng-template>
</button>

Reference element

Use cTooltipRef to position the tooltip on reference element. 5.1.0+

import { Component } from '@angular/core';
import { ButtonDirective, ElementRefDirective, TooltipDirective } from '@coreui/angular';

@Component({
  selector: 'docs-tooltip-reference-element',
  imports: [ButtonDirective, TooltipDirective, ElementRefDirective],
  template: `
    <button cButton #reference="cElementRef" cElementRef disabled>Reference</button>

    <button cButton [cTooltip]="tooltipText" color="secondary" [cTooltipRef]="reference">Tooltip on reference</button>
  `
})
export class TooltipReferenceElementComponent {
  tooltipText = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
}

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper div or span, ideally made keyboard-focusable using tabindex="0".

import { Component } from '@angular/core';
import { ButtonDirective, TooltipDirective } from '@coreui/angular';

@Component({
  selector: 'docs-tooltip-disabled-elements',
  imports: [ButtonDirective, TooltipDirective],
  template: `
    <span class="d-inline-block" tabindex="0" [cTooltip]="tooltipText" [cTooltipTrigger]="['hover', 'focus']">
      <button cButton color="secondary" disabled>Disabled button</button>
    </span>
  `
})
export class TooltipDisabledElementsComponent {
  tooltipText = 'Disabled element tooltip';
}

Usage

A shown tooltip can be dismissed by pressing the Escape key, helping satisfy the WCAG 1.4.13 “Content on Hover or Focus” success criterion.

API reference

import { TooltipModule } from '@coreui/angular';

@NgModule({
    imports: [TooltipModule,]
})
export class AppModule() { }

cTooltip

directive

jsx

import { TooltipDirective } from '@coreui/angular'

Props

Property	Default	Type
cTooltip	`undefined`	`string`, `TemplateRef<any>`
Content of tooltip
cTooltipOptions	`{}`	`Partial<Options>`
Optional popper Options object, takes precedence over cPopoverPlacement prop
cTooltipPlacement	`'top'`	`'top'`, `'bottom'`, `'left'`, `'right'`
Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
cTooltipRef5.1.0+	`undefined`	`ElementRefDirective`
ElementRefDirective for positioning the tooltip on reference element
cTooltipTrigger	`'hover'`	`Triggers`, `Triggers[]`
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
cTooltipVisible	`false`	`boolean`
Toggle the visibility of tooltip component.

Events

Event name

Event name
cTooltipVisibleChange
Emitted when `cTooltipVisible` changes. `$event` `boolean`

cTooltipVisibleChange

Emitted when cTooltipVisible changes.

$event boolean