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.
- 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.
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.
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.
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.
Props
EuiToolTip
Prop | Description and type | Default value |
|---|---|---|
Prop children# | Description and type The in-view trigger for your tooltip. ReactElement<any, string | JSXElementConstructor<any>> | Default value Required |
Prop anchorClassName# | Description and type Passes onto the span wrapping the trigger. string | Default value |
Prop anchorProps# | Description and type Passes onto the span wrapping the trigger. CommonProps & HTMLAttributes<HTMLSpanElement> | Default value |
Prop className# | Description and type Passes onto the tooltip itself, not the trigger. string | Default value |
Prop content# | Description and type The main content of your tooltip. ReactNode | Default value |
Prop display# | Description and type Common display alternatives for the anchor wrapper "block" | "inlineBlock" | Default value inlineBlock |
Prop delay# | Description and type Delay before showing tooltip. Good for repeatable items. ToolTipDelay | Default value regular |
Prop title# | Description and type An optional title for your tooltip. ReactNode | Default value |
Prop id# | Description and type Unless you provide one, this will be randomly generated. string | Default value |
Prop position# | Description and type Suggested position. If there is not enough room for it this will be changed. ToolTipPositions | Default value top |
Prop repositionOnScroll# | Description and type When When nesting an boolean | Default value |
Prop onMouseOut# | Description and type If supplied, called when mouse movement causes the tool tip to be (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. ReactNode | Default value |
Prop className# | Description and type Passes onto the tooltip itself, not the trigger. string | Default value |
Prop id# | Description and type Unless you provide one, this will be randomly generated. string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop content# | Description and type The main content of your tooltip. ReactNode | Default value |
Prop aria-label# | Description and type Explain what this icon means for screen readers. 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 (event: MouseEvent<HTMLSpanElement, MouseEvent>) => void | Default value |
Prop display# | Description and type Common display alternatives for the anchor wrapper "block" | "inlineBlock" | Default value |
Prop anchorProps# | Description and type Passes onto the span wrapping the trigger. CommonProps & HTMLAttributes<HTMLSpanElement> | Default value |
Prop repositionOnScroll# | Description and type When When nesting an boolean | Default value |
Prop anchorClassName# | Description and type Passes onto the span wrapping the trigger. string | Default value |
Prop children# | Description and type Children are not allowed as they are built using the icon props never | Default value |
Prop color# | Description and type The icon color. string | Default value |
Prop type# | Description and type The icon type. IconType | Default value questionInCircle |
Prop size# | Description and type The icon size. "s" | "m" | "l" | "xl" | "xxl" | "original" | Default value |
Prop iconProps# | Description and type Pass certain props down to 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 |