New Component: Tooltip

[haworku]

Tooltip

A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.

Description

Any element with the class name usa-tooltip and a title attribute will become a tooltip.

Requirements (proposed)

Prop Interface

TooltipProps = {
  label: string
  position: 'top' | 'bottom' | 'left' | 'right'
} 

More Details

• position prop used as data-position on tooltip element
• label is used as title on tooltip element
• Our tooltip component then takes any element (perhaps as children or as a prop or as hook, developer choice) and adds these attributes.
• The tooltip popover is generated with javascript - see uswds tooltip js. We may want to reach for an existing tooltip library or utility rather than entirely re-implementing.
• Tooltips are progressive enhancements for the title attribute, and will display as the title attribute if the component doesn’t initialize.