Tooltip Component

Tooltips display informative text when users hover over, focus on, or tap an element.

Props

title: string; // the text shown by the Tooltip
isHidden?: boolean; // supply for scenarios you don't want to show it, regardless of its internal state
children: ReactElement; // the element that will show the Tooltip on hover

Example of usage

import { Tooltip } from '@tdcerhverv/tooltip';
import { DefaultButton } from '@tdcerhverv/button';
import { Icon } from '@tdcerhverv/icon';
import Settings from '@tdcerhverv/parrotfish/dist/icons/Icons/Settings.svg';

const ButtonWithTooltip = () => (
  <Tooltip title="Settings">
    <DefaultButton>
      <Icon icon={Settings} size={16} />
    </DefaultButton>
  </Tooltip>
);

Useful links

• Figma / Shared Components / Tooltip
• Zeroheight