@contentful/f36-tooltip

title: 'Tooltip' type: 'component' status: 'stable' slug: /components/tooltip/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/tooltip' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-tooltip--basic' typescript: ./src/Tooltip.tsx

Tooltips are very useful to communicate extra information related to an element on the screen. The information should be contextual, useful, and nonessential.

Import

import { Tooltip } from '@contentful/f36-components';
// or
import { Tooltip } from '@contentful/f36-tooltip';

Examples

Button with tooltip

Tooltips in Text

Props (API reference)

Content guidelines

• Use short and clear messages as the Tooltip’s content
• The Tooltip component allows you to pass React elements as content. However, this should be used with care. ReactElement as content is best suited for text formatting purposes. It should not be used for interactive elements like links, buttons, or form elements. Additionally, extensive images should be avoided, except for text-decorator icons that give semantic meaning to the text shown in the tooltip (e.g., warning signs or other relevant icons).
  • When using ReactElement as the content, it's recommended to use the ScreenReaderOnly component when displaying critical information.

Accessibility

• Do not put essential information in Tooltip component
• Add unique id property to the tooltip, so appropriate a11y attributes could be used.

<Tooltip placement="top" id="tooltip" content="Hi I am a Tooltip">
  <TextLink>Hover me</TextLink>
</Tooltip>