Hint React-only

Open in Storybook

Hint is a text bubble used for highlighting a UI element and explaining the functionality behind it in a tutorial manner. Its content is visible without a need to open it.

Hint is composed of an icon, title, description and footer. It can also have a color.

By default Hint closes on outside click. This can be circumvented by setting the closeOnClickOutside prop, which is desired in case of using multiple Hints on the same page.

HINT Don’t confuse Hint with Tooltip. Hint usually promotes a functionality in George, Tooltip usually clarifies something.

Loading demo…

Rules For Developers

Hint needs to be wrapped around a component it relates to
The Hint’s placement direction can be controlled by setting placement prop to top or bottom

The Hint component has a footer slot that can contain additional rich content.

Loading demo…

Hint React-only

Footer