Elastic UI

ToolTip

EuiToolTip only applies to inline elements

EuiToolTip wraps its children in a span element, so if you pass in a block-level child (e.g. a div) the resulting DOM will be in violation of the HTML5 spec.

Wrap EuiToolTip around any item that you need a tooltip for. The position prop will take a suggested position, but will change it if the tooltip gets too close to the edge of the screen.

Applying tooltips to custom components

Internally, EuiToolTip applies onFocus, onBlur, onMouseOver, and onMouseOut props to whatever you pass as 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.

This tooltip appears on the top

This tooltip appears on the left and includes the optional title.

This tooltip appears on the right

This tooltip has a long delay because it might be in a repeatable component wink

This tooltip appears on the bottom of this icon:

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.

Pass a position utility class via iconProps to shift for better alignment.