import { Tooltip } from "@vitality-ds/components";

A Tooltip presents a brief, informative message that appears when a user interacts with an element. It is usually initiated either through a mouse-hover gesture or when the element recieves focus via the keyboard. It is not focusable and cannot contain focusable content.

Use the Tooltip component to wrap the component you wish to trigger the tooltip, then pass the tooltip's content via the content prop.

<Tooltip content="Add Diagnostic Request (⌘+R)">
  <Button>
    <Request /> Add
  </Button>
</Tooltip>

Aim to keep tooltips short and to the point. To handle larger amounts of content, the tooltip has a maxiumum width set and text will wrap over multiple lines. Tooltips are not interactive, nor can they handle rich content. Consider using a Popover component if you need this functionality.

<Tooltip content="This is a Patient Claim. Any correspondence from Medicare / Fund are sent directly to the patient.">
  <Button>Multi-line content</Button>
</Tooltip>

As all tooltips are "collision-aware", their position will change depending on the space available in the viewport. You can however decide on their "preferred" position.

Setting the preferredSide property determines the preferred side against the trigger that the tooltip should be placed. The side will change to its opposite when collisions occur.

Setting the preferredAlignment property determines the position relative to the preferred side and changes the placement of the small arrow outside the tooltip. The side will change to its opposite when collisions occur.

If the Tooltip is wrapping a functional component, ensure that the functional component accepts a ref using forwardRef.

() => {
  const MyButton = React.forwardRef((props, forwardedRef) => (
    <button ref={forwardedRef} {...props}>
      Button
    </button>
  ));

  return (
    <Tooltip content="This is a Patient Claim. Any correspondence from Medicare / Fund are sent directly to the patient.">
      <MyButton />
    </Tooltip>
  );
};