Grapes homepage1.44.0

    Tooltip

    Displays informative text when users hover an element.

    View source code

    Basic usage

    <Tooltip content="This is some useful information in a tooltip" triggerAsChild>
  <Button variant="primaryBrand" isDisabled text="Top tooltip" />
</Tooltip>

    Placement

    Use the placement prop to specify where the tooltip should be positioned.

    <>
  <Tooltip
    content="This is some useful information in a tooltip"
    placement="top"
    triggerAsChild
  >
    <Button variant="primaryBrand" isDisabled text="Top tooltip" />
  </Tooltip>
  <Tooltip
    content="This is some useful information in a tooltip"
    placement="bottom"
    triggerAsChild
  >
    <Button variant="primaryBrand" isDisabled text="Bottom tooltip" />
  </Tooltip>
  <Tooltip
    content="This is some useful information in a tooltip"
    placement="left"
    triggerAsChild
  >
    <Button variant="primaryBrand" isDisabled text="Left tooltip" />
  </Tooltip>
  <Tooltip
    content="This is some useful information in a tooltip"
    placement="right"
    triggerAsChild
  >
    <Button variant="primaryBrand" isDisabled text="Right tooltip" />
  </Tooltip>
</>

    Disabled

    If the isDisabled prop is set to true, the tooltip will never appear.

    <Tooltip content="This is some useful information in a tooltip" isDisabled>
  <Button variant="primaryBrand" isDisabled text="Tooltip" />
</Tooltip>

    Controlled Tooltip

    The tooltip can be controlled using the isOpen prop.

    const Demo = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <Tooltip content="Copied" isOpen={isVisible} triggerAsChild>
      <Button
        variant="primaryBrand"
        text="Click to copy"
        onClick={() => {
          setIsVisible(true);
          setTimeout(() => {
            setIsVisible(false);
          }, 2000);
        }}
      />
    </Tooltip>
  );
};

    triggerAsChild and forwardRef

    To use any component as the trigger (the component around which the tooltip will go), a div is added around it. To avoid having this div around the trigger (this can be useful for ellipsis for example), you can use the triggerAsChild prop to do so. This will remove the div but you will need to add forwardRef to your custom component.

    At least the Grapes Button, Icon, IconButton, and HighlightIcon components have a forwardRef, and this will be added to more components in the future.