Use a Tooltip to give your user extra information about something on the interface. This component is a simple styled tooltip that uses react-popper.
Import component
import { Tooltip } from 'rimble-ui';
Examples
Different ways to use Tooltip in your product.
Placement
Adjust where your tooltip appears on hover
<Tooltip message="Top tooltip" placement="top">
<Button.Outline>Show top</Button.Outline>
</Tooltip>
<Tooltip message="Left tooltip" placement="left">
<Button.Outline>Show left</Button.Outline>
</Tooltip>
<Tooltip message="Bottom tooltip" placement="bottom">
<Button.Outline>Show bottom</Button.Outline>
</Tooltip>
<Tooltip message="Right tooltip" placement="right">
<Button.Outline>Show right</Button.Outline>
</Tooltip>
Colour
Choose the colour of your Tooltip.
<Tooltip message="Dark tooltip" placement="right" variant="dark">
<Button mb={3}>Show dark</Button>
</Tooltip>
<Tooltip message="Light tooltip" placement="right" variant="light">
<Button.Outline>Show light</Button.Outline>
</Tooltip>
<Tooltip message="Wrap me around your tooltip trigger">
<Icon name="Info" />
</Tooltip>
Props
Sets the content of tooltip. Only accepts text and not markup.
Sets the placement of tooltip relative to anchoring element.
Sets the placement of tooltip relative to anchoring element.
Allowed values: 'top' 'right' 'bottom' 'left' .
Sets the theme of tooltip. Options are light or dark.
Allowed values: 'light' 'dark' .
Styled System Props
Tooltip uses COMMON, TYPOGRAPHY groups of Styled System props.
Design guidelines
Some best practices for using Tooltip in your product.
Tooltips are for supporting information
Use tooltips for extra information that some might find useful but don't necessarily need to be on the interface for everyone.
Tooltip information is hidden by default so shouldn't contain anything critical to someone using your product.
Tooltips aren't labels
Labels next to UI elements are always better than tooltips as it is not always clear that tooltips are there. And it's not always possible to hover.
Don't use tooltips to explain UI elements that could be labelled. They're for elaboration not explanation.
Keep tooltips short
Don't include too much text in a tooltip. They're for short clarification or elaboration. If you need more than a couple of sentences, consider using a modal.
Some suggested uses
This will include a small transaction fee which we'll include in your transaction summary
