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.Putting anything other than plain text in a tooltip is lost on screen readers.
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.Anchoring a tooltip to a non-interactive element makes it difficult for keyboard-only and screen reader users to read.
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, and color props.