#StandWithUkraine

Hint

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 and a description. It can 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