@contentful/f36-tooltip

---

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

Tooltip

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

• How to use Tooltip
• Component variations
• Code examples
• Content recommendations
• Accessibility

How to use Tooltip

• Even though it's possible to pass any ReactNode as a content of the Tooltip, we do not recommend passing very complex components try to use only Phrasing content

Code examples

// import { Tooltip } from '@contentful/f36-components';
<Tooltip
  placement="top"
  id="tip1"
  targetWrapperClassName="targetWrapperClassName"
  content="Hi I am a Tooltip"
>
  <TextLink>Hover me</TextLink>
</Tooltip>

Content recommendations

• Use short and clear messages as the Tooltip’s content

Accessibility

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

// import { Tooltip } from '@contentful/f36-components';
<Tooltip placement="top" id="tooltip" content="Hi I am a Tooltip">
  <TextLink>Hover me</TextLink>
</Tooltip>

Props

import { Props } from '@contentful/f36-docs-utils';