Go to Content
Design System
Playroom Storybook
#ClimateEmergency

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.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

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.

Footer

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

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.