Tooltip

Best Practices

Tooltips should:

• Provide succinct contextual information about the element they point to.
• Be used with components to provide additional information that would otherwise not be available. For example, providing icon-only buttons with a contextual description.

Tooltips should not:

• Contain important information, or information vital to task completion. Use a EzFlashMessage for important contextual information.
• Be used sparingly, and should contain minimal content.
• For interactive content, use EzModal instead.
• Use custom z-indices. See more about layering in our theming guide.

Examples

Basic tooltip

Allows a single component to become a trigger for a tooltip to provide additional information for the user.

When adding a tooltip to a user interface element other than another Recipe component, the target element must accept refs, as well as both mouse events and focus events. This allows Recipe to position the tooltip relative to the target element, and react to the user's mouse or focus resting on the target element.

When adding a tooltip to a custom react component, you may need to implement forwardRef inside your component. This will allow you to target a specific html element (or Recipe component) to act as the trigger for your tooltip.

Basic tooltip with newlines

If the tooltip message contains newlines, they will cause a line break.

Tooltip wrapping another Recipe component

Allows a single Recipe component to become a trigger for a tooltip to provide additional information for the user.

Positioning

A tooltip can be positioned either vertically or horizontally around an element by setting position to either vertical or horizontal. Usually, this will mean the tooltip will appear below or to the right of an element, but if there is not enough room, the tooltip will appear on the opposite side. The default position is vertical.

Positioned Vertically

Positioned Horizontally