Tooltip

Display non-interactive text content on hover.

Props

children

stringTrigger element, must be a focusable, single element.

label

stringContent to display in the tooltip.

side

"top" | "right" | "bottom" | "left"Side of the tooltip to display.

sideOffset

numberOffset of the tooltip from the side of the target.

align

"start" | "center" | "end"Alignment of the tooltip to display.

open

booleanWhether the tooltip is open or not.

onOpenChange

functionCalled when open state changes

import * as React from "react";
import { Tooltip } from "basics";

export default () => {
  const [open, setOpen] = React.useState(true);
  return (
    <Tooltip
      label="This feature is available on the Pro plan."
      open={open}
      onOpenChange={() => setOpen(!open)}
    >
      <Button variant="solid" color="gray" disabled>
        Enable
      </Button>
    </Tooltip>
  );
}

import * as React from "react";
import { Tooltip } from "basics";

export default () => {
  const [open, setOpen] = React.useState(true);
  return (
    <Tooltip
      label="This feature is available on the Pro plan."
      open={open}
      onOpenChange={() => setOpen(!open)}
    >
      <Button variant="solid" color="gray" disabled>
        Enable
      </Button>
    </Tooltip>
  );
}

Alignment

Start


<Flex gap="16">
  <Tooltip open align="start" side="left" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
  <Tooltip open align="start" side="top" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
  <Tooltip open align="start" side="bottom" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
  <Tooltip open align="start" side="right" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
</Flex><Flex gap="16">
  <Tooltip open align="start" side="left" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
  <Tooltip open align="start" side="top" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
  <Tooltip open align="start" side="bottom" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
  <Tooltip open align="start" side="right" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Start
    </Button>
  </Tooltip>
</Flex>

Center


<Flex gap="16">
  <Tooltip open side="left" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
  <Tooltip open side="top" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
  <Tooltip open side="bottom" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
  <Tooltip open side="right" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
</Flex><Flex gap="16">
  <Tooltip open side="left" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
  <Tooltip open side="top" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
  <Tooltip open side="bottom" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
  <Tooltip open side="right" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      Center
    </Button>
  </Tooltip>
</Flex>

End


<Flex gap="16">
  <Tooltip open align="end" side="left" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
  <Tooltip open align="end" side="top" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
  <Tooltip open align="end" side="bottom" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
  <Tooltip open align="end" side="right" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
</Flex><Flex gap="16">
  <Tooltip open align="end" side="left" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
  <Tooltip open align="end" side="top" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
  <Tooltip open align="end" side="bottom" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
  <Tooltip open align="end" side="right" label="This feature is available on the Pro plan.">
    <Button size="small" variant="solid" color="gray">
      End
    </Button>
  </Tooltip>
</Flex>