Tip

An attention getter used to highlight an aspect of the interface that might not be apparent at first glance. This should be used sparingly. Only one Tip should ever be shown on the screen at a time and only when it is referring to an action the user is likely to need or try imminitely.

The caller is responsible for determining when to show a Tip. The tip should be removed when the onClose function is called. Additionally, the Tip should not be re-displayed to the user once it has been dismissed, even across page loads or visits. Tracking which tips a user has seen can be remembered in local storage. Tips shouldn’t display any rich information including formatted text and should be limit in usage. Prioritize the tip need on user context relevance rather than what is simply “new” on the interface. To ensure memorability, keep the tip text to under one sentence to support quick skimming of content.

Properties

colorIndex accent-{index}
The color identifier to use for the background color. For example: accent-1. Only accent colors are available for Tips. Defaults to accent-1
onClose {function}
Called when the user clicks on the Tip, clicks on the target element, or when the target element loses focus.
target {string}
The DOM id or class of the element the Tip should be associated with. The id takes priority over class. If multiple classes are found, the first one will be used.

Usage

import Tip from 'grommet/components/Tip';

<Tip target='actions'
  onClose={...}>
  Available actions
</Tip>