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/forma-36-react-components'
<Tooltip
  place="top"
  id="tip1"
  targetWrapperClassName="targetWrapperClassName"
  content="Hi I am a Tooltip"
>
  <TextLink>Hover me</TextLink>
</Tooltip>
// import {Tooltip} from '@contentful/forma-36-react-components'
<Tooltip
  place="top"
  id="tip1"
  targetWrapperClassName="targetWrapperClassName"
  content="Hi I am a Tooltip"
>
  <TextLink>Hover me</TextLink>
</Tooltip>
Hide source

Content recommendations

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

Accessibility

missing