Tooltip | Elastic UI Framework

Tooltips provide short, non-essential, contextual information, usually naming or describing with more detail. If you need interactive content or anything other than text, we recommend using EuiPopover instead.

EuiToolTip vs browser tooltip

Always prefer EuiToolTip over the HTML title attribute. Native browser tooltips are unstyled, inaccessible on touch devices and have inconsistent screen reader support across browsers and platforms.

Wrap EuiToolTip around any item that you need a tooltip for and provide the content and optionally the title. The position prop will take a suggested position, but will change it if the tooltip gets too close to the edge of the screen. You can adjust the distance between the tooltip and its anchor using the offset prop. By default, this value is 16.

Accessibility requirements

Tooltip anchor

Tooltips must be anchored to focusable elements. If you're using a non-interactive tag (like span or EuiText), add tabIndex={0} or preferably use an interactive one (like EuiButton) for built-in accessibility.

Put only plain text in tooltips. Tooltip content is not reachable by keyboard, so any interactive content (links, buttons, inputs) inside a tooltip is inaccessible, violating WCAG 2.1.1 Keyboard and WCAG 1.4.13 Content on Hover or Focus. Use EuiPopover for any content requiring interaction.

By default, EuiToolTip links its content to the trigger via aria-describedby, causing screen readers to announce both the trigger's accessible label and the tooltip content. This is the correct behavior when the tooltip provides context not already present in the trigger label.

When the tooltip content exactly duplicates the trigger's accessible label, such as an icon button whose aria-label and tooltip both say "Edit", set disableScreenReaderOutput to prevent the redundant double-announcement.

Disabled elements Beta

Natively disabled elements are removed from the tab order, which prevents keyboard users from focusing them and discovering the tooltip. For EUI button components, use hasAriaDisabled instead of disabled. It renders a visually identical disabled state while keeping the element focusable.

For non-EUI elements or custom components, use aria-disabled="true" instead of the native disabled attribute. This keeps the element focusable and accessible to keyboard users, while still conveying the disabled state to assistive technologies. You should set pointer-events: none to prevent mouse interactions.

Wrapping components

EuiToolTip wraps its children in a <span> element that is display: inline-block. If you are wrapping a block-level child (e.g. a <div>), you may need to change this by passing display="block" but the resulting DOM may be in violation of the HTML5 spec.

It also applies onFocus and onBlur props the the cloned children. If you pass in a custom component, then you'll need to make sure these props are applied to the root element rendered by your component. The best way to do that is to follow EUI’s guidelines on pass-through props.

Tooltips even work on position: fixed; elements. Add the repositionOnScroll boolean prop to ensure the tooltip realigns to the fixed anchor on scroll.

Icon tip

You can use EuiIconTip to explain options, other controls, or entire parts of the user interface. When possible, surface explanations inline within the UI, and only hide them behind a EuiIconTip as a last resort.

It accepts all the same props as EuiToolTip. For convenience, you can also specify optional icon size, type, andcolor props.

Props

EuiToolTip


Prop	Description and type	Default value
Prop children#	Description and type The in-view trigger for your tooltip. Type: `ReactElement<any, string \| JSXElementConstructor<any>>`	Default value Required
Prop anchorClassName#	Description and type Passes onto the span wrapping the trigger. Type: `string`	Default value
Prop anchorProps#	Description and type Passes onto the span wrapping the trigger. Type: `CommonProps & HTMLAttributes<HTMLSpanElement>`	Default value
Prop className#	Description and type Passes onto the tooltip itself, not the trigger. Type: `string`	Default value
Prop content#	Description and type The main content of your tooltip. Type: `ReactNode`	Default value
Prop display#	Description and type Common display alternatives for the anchor wrapper Type: `"block" \| "inlineBlock"`	Default value `inlineBlock`
Prop title#	Description and type An optional title for your tooltip. Type: `ReactNode`	Default value
Prop id#	Description and type Unless you provide one, this will be randomly generated. Type: `string`	Default value
Prop position#	Description and type Suggested position. If there is not enough room for it this will be changed. Type: `ToolTipPositions`	Default value
Prop repositionOnScroll#	Description and type When `true`, the tooltip's position is re-calculated when the user scrolls. This supports having fixed-position tooltip anchors. When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true` Type: `boolean`	Default value
Prop disableScreenReaderOutput#	Description and type Disables the tooltip content being read by screen readers when focusing the trigger element. Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone information (action & additional information). Enable this prop only when the trigger has a descriptive label that either duplicates or includes the tooltip content and would result in repetitive output. Type: `boolean`	Default value `false`
Prop onMouseOut#	Description and type If supplied, called when mouse movement causes the tool tip to be hidden. Type: `(event: MouseEvent<HTMLSpanElement, MouseEvent>) => void`	Default value
Prop offset#	Description and type Offset in pixels from the anchor. Defaults to 16. Type: `number`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<EuiToolTipRef>`	Default value

EuiIconTip


Prop	Description and type	Default value
Prop title#	Description and type An optional title for your tooltip. Type: `ReactNode`	Default value
Prop className#	Description and type Passes onto the tooltip itself, not the trigger. Type: `string`	Default value
Prop id#	Description and type Unless you provide one, this will be randomly generated. Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop content#	Description and type The main content of your tooltip. Type: `ReactNode`	Default value
Prop aria-label#	Description and type Explain what this icon means for screen readers. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop onMouseOut#	Description and type If supplied, called when mouse movement causes the tool tip to be hidden. Type: `(event: MouseEvent<HTMLSpanElement, MouseEvent>) => void`	Default value
Prop display#	Description and type Common display alternatives for the anchor wrapper Type: `"block" \| "inlineBlock"`	Default value
Prop offset#	Description and type Offset in pixels from the anchor. Defaults to 16. Type: `number`	Default value
Prop anchorProps#	Description and type Passes onto the span wrapping the trigger. Type: `CommonProps & HTMLAttributes<HTMLSpanElement>`	Default value
Prop anchorClassName#	Description and type Passes onto the span wrapping the trigger. Type: `string`	Default value
Prop repositionOnScroll#	Description and type When `true`, the tooltip's position is re-calculated when the user scrolls. This supports having fixed-position tooltip anchors. When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true` Type: `boolean`	Default value
Prop disableScreenReaderOutput#	Description and type Disables the tooltip content being read by screen readers when focusing the trigger element. Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone information (action & additional information). Enable this prop only when the trigger has a descriptive label that either duplicates or includes the tooltip content and would result in repetitive output. Type: `boolean`	Default value `false`
Prop children#	Description and type Children are not allowed as they are built using the icon props Type: `never`	Default value
Prop color#	Description and type The icon color. Type: `string`	Default value
Prop type#	Description and type The icon type. Type: `IconType`	Default value `question`
Prop size#	Description and type The icon size. Type: `"s" \| "m" \| "l" \| "xl" \| "xxl" \| "original"`	Default value
Prop iconProps#	Description and type Pass certain props down to `EuiIcon` Type: `Omit<Omit<EuiIconProps, "stylesMemoizer"> & RefAttributes<unknown>, "type"> & { type?: never; }`	Default value
Prop position#	Description and type Type: `ToolTipPositions`	Default value `top`

Accessibility requirements

Tooltip anchor

Tooltip content

Screen reader output

Disabled elements Beta

Wrapping components

Tooltip on a fixed element

Icon tip

Props