Tooltip

Import

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

Examples

Button with tooltip

function ButtonWithTooltipExample() {
  return (
    <Tooltip placement="top" id="tooltip-1" content="This feature is disabled.">
      <Button isDisabled>Update</Button>
    </Tooltip>
  );
}

Tooltips in Text

function TooltipInTextExample() {
  const TextWithNote = ({ note, id, children }) => (
    <Tooltip placement="top" id={id} content={note}>
      <Text as="b" fontColor="red600" fontWeight="fontWeightDemiBold">
        {children}
      </Text>
    </Tooltip>
  );
  return (
    <Text as="p">
      A{' '}
      <TextWithNote note="Content Management System" id="cms">
        CMS
      </TextWithNote>{' '}
      is a{' '}
      <TextWithNote
        note="A collection of instructions to tell a computer how to work."
        id="software"
      >
        computer software
      </TextWithNote>{' '}
      used to manage the creation and modification of digital content.
    </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.

function WithoutTriggerWrapperTooltipExample() {
  return (
    <Tooltip
      withTriggerWrapper={false}
      content="I am rendered without an extra wrapper"
    >
      <TextLink href="/">Hover me</TextLink>
    </Tooltip>
  );
}

Content guidelines

• Use a short label or explanation. Aim for one line and keep explanations to roughly two lines.
• Use Caption/Normal typography: 12px regular text with a 16px line height.
• Text aligns to the reading direction and wraps naturally within a default maximum width of 240px. Avoid manual line breaks or truncating tooltip text. Use maxWidth only when the content requires a different width.
• Use React elements only for minimal inline formatting, such as emphasis. Provide an accessible label when using React elements.
• Use a Popover for headings, multiple paragraphs, images, links, buttons, or other interactive content. Keep essential instructions visible in the interface.

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>