Tooltip

Generally, tooltips should 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.

Accessibility requirements

• Tooltips must be anchored to elements that accept keyboard focus.
• Put only plain text in tooltips so the content is accessible to keyboard and screen reader users.
• Do not add links, buttons, or other interactive content inside tooltips.

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.

Loading...

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.

Loading...

Tooltip on a fixed element

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

Loading...

IconTip

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.

Loading...

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 delay# ↦	Description and type Delay before showing tooltip. Good for repeatable items. Type: ToolTipDelay ↦	Default value regular ↵
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 top ↵
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 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 ↵

𐘂𐘂

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 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 questionInCircle ↵
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 delay# ↦	Description and type Type: ToolTipDelay ↦	Default value regular ↵
Prop position# ↦	Description and type Type: ToolTipPositions ↦	Default value top ↵

𐘂𐘂