Tooltip

Tooltip is a component that displays short information, such as supplementary details for an element.

Import

import { Tooltip } from "@yamada-ui/react"

Copied!

Usage

If the children of Tooltip is a functional component, please use forwardRef in the functional component to receive the ref from Tooltip.

Editable example

<Tooltip label="へっ！きたねぇ花火だ">
  <Text w="fit-content">Please Hover</Text>
</Tooltip>

Copied!

Change the Display Position

To change the display position, set placement to values like top or left-start. By default, bottom is set.

Editable example

<VStack>
  <For
    each={[
      "top",
      "left",
      "bottom",
      "right",
      "top-start",
      "top-end",
      "left-start",
      "left-end",
      "bottom-start",
      "bottom-end",
      "right-start",
      "right-end",
    ]}
  >
    {(placement, index) => (
      <Tooltip key={index} label="へっ！きたねぇ花火だ" placement={placement}>
        <Text w="fit-content">
          Open {placement.split("-").reduce((prev, next) => prev + " " + next)}{" "}
          Tooltip
        </Text>
      </Tooltip>
    )}
  </For>
</VStack>

Copied!

Change the Animation

To change the show or hide animation, set animation to values like top or left. By default, scale is set.

Editable example

<VStack>
  <For each={["scale", "top", "left", "bottom", "right"]}>
    {(animation, index) => (
      <Tooltip key={index} label="へっ！きたねぇ花火だ" animation={animation}>
        <Text w="fit-content">
          Open {animation.split("-").reduce((prev, next) => prev + " " + next)}{" "}
          Tooltip
        </Text>
      </Tooltip>
    )}
  </For>
</VStack>

Copied!

Change the Duration

To change the duration, set duration to a number (seconds).

Editable example

<Tooltip label="へっ！きたねぇ花火だ" duration={0.7}>
  <Text w="fit-content">Please Hover</Text>
</Tooltip>

Copied!

Change the Offset

Depending on the size of the element or the situation, you may want to adjust the position of the tooltip. In that case, adjust the position using gutter or offset.

gutter allows you to set the difference with simple elements, and offset allows you to set [horizontal axis, vertical axis].

Editable example

<VStack>
  <Tooltip label="へっ！きたねぇ花火だ" gutter={32}>
    <Text w="fit-content">Please Hover</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" offset={[16, 16]}>
    <Text w="fit-content">Please Hover</Text>
  </Tooltip>
</VStack>

Copied!

Add a Delay

If you want to delay the display or hiding, set openDelay or closeDelay to a number (milliseconds).

Editable example

<Tooltip
  label="へっ！きたねぇ花火だ"
  placement="top"
  openDelay={500}
  closeDelay={500}
>
  <Text w="fit-content">Delay Open and Close 500ms</Text>
</Tooltip>

Copied!

Disable

To disable the tooltip, set isDisabled to true.

Editable example

<Tooltip label="へっ！きたねぇ花火だ" isDisabled>
  <Text w="fit-content">Please Hover</Text>
</Tooltip>

Copied!

Always Display

To always display the tooltip, set isOpen to true.

Editable example

<Tooltip label="へっ！きたねぇ花火だ" isOpen>
  <Text w="fit-content">Please Hover</Text>
</Tooltip>

Copied!

Edit this page on GitHub

PreviousPopover NextTour