### File

`packages/components/directives/eui-tooltip/eui-tooltip.directive.ts`

### Description

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:

Example :

    <button euiTooltip="Save your changes">Save</button>

Tooltip with position and variant:

Example :

    <span euiTooltip="Error occurred" position="below" euiTooltipDanger>!</span>

Tooltip with delays:

Example :

    <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

### Implements

`OnChanges` `OnInit` `OnDestroy`

### Metadata

Selector | `[euiTooltip]`
exportAs | `euiTooltip`

### Index

###### Methods

- focused
- Public hide
- mouseEntering
- Public show

###### Inputs

- contentAlignment
- e2eAttr
- euiTooltip
- euiTooltipAccent
- euiTooltipDanger
- euiTooltipInfo
- euiTooltipPrimary
- euiTooltipSecondary
- euiTooltipSuccess
- euiTooltipWarning
- hideDelay
- isDisabled
- position
- showDelay

###### HostListeners

- focus
- keydown.esc
- mouseenter

###### Accessors

- isOpen

### Inputs

contentAlignment
Type : `"left" | "right" | "center" | "justify"`
Default value : `'center'`
Sets the alignment of the content in the tooltip.

e2eAttr
Type : `string`
Default value : `'eui-tooltip'`
Sets the `data-e2e` attribute for the host element.

euiTooltip
Type : `string`
Tooltip content.

euiTooltipAccent
Type : `boolean`
Default value : `false`
Whether the tooltip has Accent state.

euiTooltipDanger
Type : `boolean`
Default value : `false`
Whether the tooltip has a Danger state.

euiTooltipInfo
Type : `boolean`
Default value : `false`
Whether the tooltip has Info state.

euiTooltipPrimary
Type : `boolean`
Default value : `false`
Whether the tooltip has a Primary state.

euiTooltipSecondary
Type : `boolean`
Default value : `false`
Whether the tooltip has a Secondary state.

euiTooltipSuccess
Type : `boolean`
Default value : `false`
Whether the tooltip has a Success state.

euiTooltipWarning
Type : `boolean`
Default value : `false`
Whether the tooltip has a Warning state.

hideDelay
Type : `number`
Default value : `0`
Sets the delay for the tooltip to be hidden

isDisabled
Type : `boolean`
Default value : `false`
Whether the tooltip is disabled.

position
Type : `"left" | "right" | "above" | "below" | "before" | "after" | string`
Default value : `'above'`
Sets the position of the tooltip relative to its trigger element.

showDelay
Type : `number`
Default value : `0`
Sets the delay for the tooltip to be visible.

### HostListeners

focus
Arguments : `'$event'`

keydown.esc
Arguments : `'$any($event)'`

mouseenter
Arguments : `'$event'`

### Methods

focused
`focused(event: FocusEvent)`
Decorators : `@HostListener('focus', ['$event'])`

Parameters :

Name | Type | Optional
event | `FocusEvent` | No

Returns : `void`

Public hide
`hide()`
Method that closes a tooltip. Returns : `void`

mouseEntering
`mouseEntering(event: MouseEvent)`
Decorators : `@HostListener('mouseenter', ['$event'])`

Parameters :

Name | Type | Optional
event | `MouseEvent` | No

Returns : `void`

Public show
`show(origin: EventTarget)`

Method that shows a tooltip.

Parameters :

Name | Type | Optional | Default value | Description
origin | `EventTarget` | No | `this.host.nativeElement` | Origin of the tooltip. Where it will be displayed.

Returns : `void`

### Accessors

isOpen
get `isOpen()`
Returns the current open state. Returns : `boolean`

# results matching ""

# No results matching ""