### 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

### Metadata

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

### Index

###### Methods

- Public hide
- Public show

###### Inputs

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

###### Outputs

- position

### Constructor

`constructor()`

### Inputs

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

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

euiTooltip
Type : `string`
Required : true
Tooltip content.

euiTooltipAccent
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip has Accent state.

euiTooltipDanger
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip has a Danger state.

euiTooltipInfo
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip has Info state.

euiTooltipPrimary
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip has a Primary state.

euiTooltipSecondary
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip has a Secondary state.

euiTooltipSuccess
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip has a Success state.

euiTooltipWarning
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip has a Warning state.

hideDelay
Default value : `0, { transform: numberAttribute }`
Sets the delay for the tooltip to be hidden

isDisabled
Default value : `false, { transform: booleanAttribute }`
Whether the tooltip is disabled.

position
Type : `Position | string`
Default value : `Position.ABOVE`
Sets the position of the tooltip relative to its trigger element.

showDelay
Default value : `0, { transform: numberAttribute }`
Sets the delay for the tooltip to be visible.

### Outputs

position
Type : `Position | string`
Sets the position of the tooltip relative to its trigger element.

### Methods

Public hide
`hide()`
Method that closes a tooltip. 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`

# results matching ""

# No results matching ""