Tooltips

Back to Form Elements

About Tooltips

Tooltips provides additional, clarifying information to visitors about unknown or unfamiliar elements that are not directly explained on your website.

Example

Usage

Usage information will be added when this component is available in Drupal 8.

Best Practice
  • Avoid using tooltips for important information that is needed to complete a task
  • Do not create instructions and/or form field requirements as tooltips
  • Tooltips should provide concise content that further explains the element on your page
  • Users should be able to hover over the tooltip with both their mouse and keyboard
  • Make sure tooltips do not block the surrounding content
  • Use tooltips consistently throughout your website
  • Data entry forms should not use tooltips to indicate errors
Accessibility
  • Tooltips might not render correctly on mobile and touch devices
  • Confirm that the tooltip icon meets WCAG color contrast requirements
  • The content that appears inside a tooltip can not be read out by screen readers.