Skip to Content
247 Components v1.0 is released 🎉
Components
Tooltip

Props

PropTypeDefault
side’top’ | ‘right’ | ‘bottom’ | ‘left''top’
align’start’ | ‘center’ | ‘end''center’
backgroundColor’black’ | ‘white’
dataTestIdstring

Basic

Placement

Background Color

Use backgroundColor to set the tooltip background to 'black' or 'white'.

Usage Guidelines

  1. Placement: Choose the appropriate side and alignment based on the available space and the element’s position in the UI.
  2. Content: Keep tooltip content concise and informative. Avoid long paragraphs.
  3. Accessibility: Tooltips should provide additional context or information that isn’t essential for understanding the interface.
  4. Trigger: Tooltips are typically triggered on hover or focus, but can also be controlled programmatically.
Last updated on