Tooltip for Angular

import { AuiTooltip } from '@absoluteui/angular/tooltip';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Tooltip page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { tooltip: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiTooltip } from '@absoluteui/angular/tooltip';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-editor-toolbar',
  imports: [AuiTooltip, AuiButton],
  template: `
    <button type="button" auiButton auiTooltip="Ctrl+S" tooltipPlacement="bottom">Save</button>
    <button type="button" auiButton icon="menu" variant="ghost" auiTooltip="Settings" tooltipRelation="label"></button>
  `,
})
export class EditorToolbarComponent {}

[auiTooltip]

Class AuiTooltip; template reference #ref="auiTooltip".

AbsoluteUI Tooltip on its trigger: <button auiTooltip="Opens the help center">.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiTooltip	string		Required. Tooltip text (text only).
tooltipRelation	TooltipRelation	'description'	Trigger gets aria-describedby (‘description’) or aria-labelledby (‘label’, for icon-only controls).
tooltipPlacement	Placement	'top'	Preferred side and logical alignment; flips and shifts to fit.
tooltipShowDelay	number	'500'	Hover delay before showing, ms. Keyboard focus shows immediately.
tooltipHideDelay	number	'100'	Delay after the pointer leaves the trigger and tooltip before hiding, ms.
tooltipDirection	"ltr" | "rtl"	'ltr'	Resolves logical start/end placements.

Outputs

Output	Payload	Description
(opened)	null	After the tooltip became visible (dispatched on the tooltip element). Re-emits aui-open.
(closed)	null	After the tooltip was hidden. Re-emits aui-close.

Methods

Call them through a viewChild query or a template reference.

Method	Description
show(): void	Show the tooltip now (without the hover delay).
hide(): void	Hide the tooltip.