# EuiTooltipDirective

**Type:** directive



Directive for displaying contextual information in a tooltip overlay on hover or focus.
Provides semantic color variants and flexible positioning relative to the trigger element.
Automatically handles show/hide behavior with configurable delays and keyboard dismissal.
Built on Angular CDK Overlay for robust positioning and scroll handling.

Basic tooltip:
```html
<button euiTooltip="Save your changes">Save</button>
```

Tooltip with position and variant:
```html
<span euiTooltip="Error occurred" position="below" euiTooltipDanger>!</span>
```

Tooltip with delays:
```html
<a euiTooltip="Click for details" [showDelay]="500" [hideDelay]="200">Info</a>
```

### Accessibility
- Tooltip appears on both hover and keyboard focus for screen reader compatibility
- Press Escape key to dismiss tooltip
- Ensure tooltip content is non-essential as it may not be announced by all screen readers

### Notes
- Tooltip content should be brief and contextual
- Use semantic variants (euiTooltipDanger, euiTooltipWarning) to convey meaning
- Position automatically adjusts if space is insufficient (fallback positioning)
- Tooltip is disabled when isDisabled is true or tooltipContent is empty


**Selector:** `[euiTooltip]`

## Inputs
- **contentAlignment**: `"left" | "right" | "center" | "justify"` - Sets the alignment of the content in the tooltip.
- **e2eAttr**: `string` - Sets the `data-e2e` attribute for the host element.
- **euiTooltip**: `string` - Tooltip content.
- **euiTooltipAccent**: `boolean` - Whether the tooltip has Accent state.
- **euiTooltipDanger**: `boolean` - Whether the tooltip has a Danger state.
- **euiTooltipInfo**: `boolean` - Whether the tooltip has Info state.
- **euiTooltipPrimary**: `boolean` - Whether the tooltip has a Primary state.
- **euiTooltipSecondary**: `boolean` - Whether the tooltip has a Secondary state.
- **euiTooltipSuccess**: `boolean` - Whether the tooltip has a Success state.
- **euiTooltipWarning**: `boolean` - Whether the tooltip has a Warning state.
- **hideDelay**: `number` - Sets the delay for the tooltip to be hidden
- **isDisabled**: `boolean` - Whether the tooltip is disabled.
- **position**: `"left" | "right" | "above" | "below" | "before" | "after" | string` - Sets the position of the tooltip relative to its trigger element.
- **showDelay**: `number` - Sets the delay for the tooltip to be visible.