Hint React-only

Open in Storybook

Hint is a text bubble used to highlight a usually interactive UI element and explain 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.

HINT Don’t confuse Hint with Tooltip. Hint usually promotes a functionality in George, Tooltip should be used as a label to clarify 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.
By default Hint closes on outside click. This can be circumvented by setting the closeOnClickOutside prop, which may be desired when using multiple Hints on the same page.

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

Loading demo…

Hint React-only

Footer