eui documentation
  1. Directives
  2. EuiTooltipDirective

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
Inputs
HostListeners
Accessors

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
getisOpen()

Returns the current open state.

Returns : boolean

results matching ""

    No results matching ""