Tooltip

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
Colour
Choose the colour of your Tooltip.

Props

Prop NameTypeIs RequiredDefault ValueDescription
variantenumoptional
'dark'
Sets the theme of tooltip. Options are light or dark.
Allowed values: 'light', 'dark',
placementenumoptional
'bottom'
Sets the placement of tooltip relative to anchoring element.
Allowed values: 'top', 'right', 'bottom', 'left',
offsetstringoptional
'0, 0'
Sets the placement of tooltip relative to anchoring element.
messagestringoptional
'props.message text'
Sets the content of tooltip. Only accepts text and not markup.
Styled System Props
Tooltip uses COMMON, TYPOGRAHY groups of Styed System props.

Design guidelines

Some best practices for using Tooltip in your product.
Tooltips are for supporting information
They're 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. For example, if you hover over a piece of UI that indicates your network status...
Do
Don't
Tooltips aren't labels
Tooltips are for elaboration. 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.
Do
Don't
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
0x99...7d2
This will include a small transaction fee which we'll include in your transaction summary
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute