@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

Tooltip without wrapper (withTriggerWrapper={false})

• Use withTriggerWrapper={false} to avoid rendering an additional wrapper element around the trigger.
• withTriggerWrapper={false} requires a single valid React element as children.
• as and targetWrapperClassName only apply when the trigger wrapper is enabled.
• If the trigger element is disabled, the tooltip will not be shown on hover in this mode.

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>