# Tooltip
Tooltip is exposed as a standalone directive applied to an existing trigger element. It supports placement, size, show delay, optional arrow rendering, disabled mode, and an accessibility relationship that can behave as a description or as the element label.
## Import
```ts
import { TooltipDirective } from 'ui';
```
## Basic usage
```ts
import { Component } from '@angular/core';
import { ButtonComponent, TooltipDirective } from 'ui';
@Component({
selector: 'app-tooltip-basic-example',
standalone: true,
imports: [ButtonComponent, TooltipDirective],
template: `
New issue
Export filtered
`,
})
export class TooltipBasicExampleComponent {}
```
## Placement and fallback
```ts
import { Component } from '@angular/core';
import { ButtonComponent, TooltipDirective } from 'ui';
@Component({
selector: 'app-tooltip-positions-example',
standalone: true,
imports: [ButtonComponent, TooltipDirective],
template: `
Top
Bottom
Left
Right
`,
})
export class TooltipPositionsExampleComponent {}
```
## Sizes, delays, and arrow
```ts
import { Component } from '@angular/core';
import { ButtonComponent, TooltipDirective } from 'ui';
@Component({
selector: 'app-tooltip-sizes-example',
standalone: true,
imports: [ButtonComponent, TooltipDirective],
template: `
Small
Medium
Large, delayed, no arrow
`,
})
export class TooltipSizesExampleComponent {}
```
## Accessible relationship
```ts
import { Component } from '@angular/core';
import { ButtonComponent, TooltipDirective } from 'ui';
@Component({
selector: 'app-tooltip-relationship-example',
standalone: true,
imports: [ButtonComponent, TooltipDirective],
template: `
Description relationship
Visible label stays primary, tooltip adds supporting context.
Smart test run
Label relationship
Use only when the trigger itself does not expose a sufficient accessible name.
`,
})
export class TooltipRelationshipExampleComponent {}
```
## Toolbar and compact actions
```ts
import { Component } from '@angular/core';
import { ButtonComponent, TooltipDirective } from 'ui';
@Component({
selector: 'app-tooltip-toolbar-example',
standalone: true,
imports: [ButtonComponent, TooltipDirective],
template: `
`,
})
export class TooltipToolbarExampleComponent {}
```
## Metadata in dense data views
```ts
import { Component } from '@angular/core';
import { ButtonComponent, TooltipDirective } from 'ui';
@Component({
selector: 'app-tooltip-data-table-example',
standalone: true,
imports: [ButtonComponent, TooltipDirective],
template: `
Nightly billing sync
Healthy
Region cache warmup
Attention
Inspect
`,
})
export class TooltipDataTableExampleComponent {}
```
## Accessibility
### Description versus label
By default the directive sets `aria-describedby`, which is the right choice when the trigger already has a visible label and the tooltip adds supporting context. Use `uiTooltipRelationship="label"` only when the tooltip should act as the accessible name.
| Relationship | Behavior |
| --- | --- |
| `description` | adds tooltip text as supplemental context |
| `label` | uses tooltip text as the accessible name |
| disabled tooltip | no overlay and no relationship wiring |
### Keyboard access
The directive listens to both hover and focus, so keyboard users can reveal the tooltip when the trigger itself is focusable.
| Trigger state | Result |
| --- | --- |
| hover | tooltip opens after the configured delay |
| focus | tooltip opens for keyboard users |
| blur / mouse leave | tooltip closes |
Do not rely on tooltip text for information that is required before the trigger can be understood or used.
### Tooltip role
The overlay renders with `role="tooltip"`. Keep content short, plain, and non-interactive so it behaves like a tooltip rather than a popover or inline help panel.