A floating description label which appears when hovering over an element.
Example
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| isSubmit | bool | - | false | Make the button act as a submit button |
| isDisabled | bool | - | false | Prevent users from interacting with the button |
| width | oneOf 'default' | 'full' | - | 'default' | Various height and width options |
| isLink | bool | - | false | Changes the button to a div for insertion within a Link component |
| onBlur | func | - | () => {} | Function that fires when the button loses focus |
| onClick | func | - | () => {} | Function that fires when the button is clicked on |
| onMouseDown | func | - | () => {} | Function that fires when the button is mouse downed |
| ariaLabel | string | - | - | Describes buttons that have an icon but no text |
| children | node | yes | - | Text within the button |
| isActive | bool | - | - | Render button with active state |
| size | oneOf 'tiny' | 'small' | 'large' | 'narrow' | 'tight' | - | - | Various height and width options |
| style | oneOf 'highlight' | 'danger' | 'danger-outline' | 'outline' | 'outline-reverse' | 'plain' | 'toggle' | 'underline' | 'unstyled' | - | - | Various color options |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Tooltips are used to provide additional information about an atom or molecule. These can be helpful when it might be unclear what a particular molecule does when clicked. For example: when the root navigation collapses, and a tooltip is provided for each navigation item because the labels are hidden.
What's Inside a Tooltip?
Tooltips contain text only. They should not contain images, links or other UI elements. You should try to keep the contents of a tooltip short. Ideally, less than 80 characters.
Best Practices
Do
Keep them short. Consider using popovers for longer content.
Use a tooltip when labels aren't visible.
Don't
Don't use if the component it's attached to already has a label.
Don't add links, images or any content other than text to a tooltip.
Don't exceed two lines in the tooltip.