Forma 36 - Tooltip

Import

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

Examples


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

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>
  );
}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>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
children required	ReactNode Child nodes to be rendered in the component and that will show the tooltip when they are hovered
as	HTML Tag or React Component (e.g. div, span, etc) HTML element used to wrap the target of the tooltip
className	string CSS class to be appended to the root element
content	string ReactElement<any, string \| JSXElementConstructor<any>> Content of the tooltip
hideDelay	number Set a delay period in milliseconds before hiding the tooltip	0
id	string A unique id of the tooltip
isDisabled	false true Prevents showing the tooltip	false
isVisible	false true It controls the initial visibility of the tooltip	false
label	string Accesible label property, only required when using ReactElement as content
maxWidth	number "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "-moz-fit-content" "-moz-max-content" "-moz-min-content" "-webkit-fit-content" "-webkit-max-content" "-webkit-min-content" "fit-content" "intrinsic" "max-content" "min-content" "none" string & {} It sets a max-width for the tooltip	360
onBlur	(evt: FocusEvent<Element, Element>) => void Function that will be called when target gets blurred
onFocus	(evt: FocusEvent<Element, Element>) => void Function that will be called when target gets focused
onKeyDown	(evt: KeyboardEvent) => void Function that will be called when the user uses a keyboard key on the target
onMouseLeave	(evt: MouseEvent<Element, MouseEvent>) => void Function that will be called when the user move the mouse out of the target
onMouseOver	(evt: MouseEvent<Element, MouseEvent>) => void Function that will be called when the user move the mouse over of the target
placement	"auto" "auto-start" "auto-end" "top" "bottom" "right" "left" "top-start" "top-end" "bottom-start" "bottom-end" "right-start" "right-end" "left-start" "left-end" It sets the "preferred" position of the tooltip	auto
showDelay	number Set a delay period in milliseconds before showing the tooltip	0
targetWrapperClassName	string Class names to be appended to the className prop of the tooltip’s target
testId	string A [data-test-id] attribute used for testing purposes	cf-ui-tooltip
usePortal	false true Boolean to control whether or not to render the tooltip in a React Portal. Rendering content inside a Portal allows the tooltip to escape the bounds of its parent while still being positioned correctly. Using a Portal is necessary if an ancestor of the tooltip hides overflow. Defaults to `false`	false

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>

Tooltip

Import

Examples

Button with tooltip

Tooltips in Text

Props (API reference)

Name

Type

Default

Content guidelines

Accessibility

Help improve this page