Forma 36: Tooltip component

Usage no npm install needed!

<script type="module">
  import contentfulF36Tooltip from 'https://cdn.skypack.dev/@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://v4-f36-storybook.netlify.app/?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 { Tooltip } from '@contentful/f36-components';
// or
import { Tooltip } from '@contentful/f36-tooltip';


Button with tooltip

Tooltips in Text

Props (API reference)

Content guidelines

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


  • 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>