import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Components/Molecules/Tooltip"/>


# Tooltip

Tooltips are floating dialogues which provide a user with contextual information about a feature or element onsite. The tooltip is displayed when a user hovers or focuses on the element it is describing. While tooltips are typically attached to icons, they can also be triggered by links, text, buttons, or inputs. If the information is critical for the user to achieve a task, keep the information clear onsite rather than hiding it within a tooltip.

## Use Cases

-   Give additional information to a page element or control
    
-   Aid in input instructions with form fields
    
-   Give notice of an update or new feature release
    
-   Provide guidance to a new user

Confused whether you should use a tooltip? Figure out in 3 seconds if a using tooltip is necessary by visiting [this](https://media.nngroup.com/media/editor/2018/11/19/v2tooltipsasset-9.png) link.
    
## Tooltip vs Popover Menu

Though they can look visually similar, a popover menu is different from a tooltip due to the function it provides to a user. At its core, a popover menu is a menu, used to give a user access to extended actionable, interactive options.  

Tooltips, on the other hand, are used to provide additional, helpful information to a user as they interact with a website. The information within a tooltip is not typically interactive but rather informative and helpful. If the information being provided is critical to the user's experience, it should be exposed onsite at all times and not placed within a tooltip. 
  
## States

### Default/Closed State
By default, a tooltip loads in its closed state so that its contents of the menu are hidden from view to the user. Only the trigger object is visable in this closed state.
<br/>
 <img alt="tooltip closed state" src="./images/Molecules-Tooltips-ClosedState.png" width="300" />
<br/>

### Opened State
When a user hovers or clicks on the trigger object, the tooltip appears using our Incoming animation curve. When a user clicks away or hovers off the trigger object, the tooltip collapses using our Outgoing animation curve.
<br/>
 <img alt="tooltip opened state" src="./images/Molecules-Tooltips-OpenedState.png" width="300" />
<br/>

## Variants

Tooltips can vary in their configuration or style by brand. This includes typography, color, padding, and the optional link button or primary CTA. See the examples below for Whitelabel (left) vs. Gothamist (right).
 <img alt="tooltip variations" src="./images/Molecules-Tooltips-Variants.png" width="400" />

## Placement

Tooltips should always be positioned next to the element they are describing. Opened tooltip dialogues may be positioned above, below, left, or right of their trigger item, which will most often be an information icon based on our best practices. The position will vary depending on where the element is in relation to the edge of the screen.


## Motion

Animation for tooltips comes into play when the tooltip is activated upon user hover or click. Use our preset Incoming and Outgoing easing tokens to make tooltips appear and disappear.

  

## Accessibility

Tooltips are viewable on hover or focus of the element they are connected to, this functionality gives viewability to all users, even those not using a mouse.

On mobile, elements with tooltips should be accessible on click if they are typically triggered on hover/focus.


## Testing & Learnings

No tests have been run on tooltips at this time.