Tooltip

Tooltipは、要素の補足など短い情報を表示するコンポーネントです。

インポート

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

Copied!

使い方

Tooltipのchildrenが関数コンポーネントの場合は、関数コンポーネントにforwardRefを使用してTooltipからのrefを受け取れるようにしてください。

編集可能な例

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

Copied!

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。

編集可能な例

<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!

アニメーションを変更する

表示または非表示のアニメーションを変更するには、animationにtopやleftなどを設定します。デフォルトでは、scaleが設定されています。

編集可能な例

<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!

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

編集可能な例

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

Copied!

オフセットを変更する

要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

<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!

遅延させる

表示または非表示を遅延させたい場合は、openDelayまたはcloseDelayに数値(ミリ秒)を設定します。

編集可能な例

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

Copied!

無効にする

ツールチップを無効にするには、disabledをtrueに設定します。

編集可能な例

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

Copied!

常に表示する

ツールチップを常に表示するには、openをtrueに設定します。

編集可能な例

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

Copied!

GitHubでこのページを編集する

前Popover 次Tour