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>
  <Tooltip label="へっ！きたねぇ花火だ" placement="top">
    <Text w="fit-content">Open top Tooltip</Text>
  </Tooltip>

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

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

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

  <Tooltip label="へっ！きたねぇ花火だ" placement="top-start">
    <Text w="fit-content">Open top start Tooltip</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" placement="top-end">
    <Text w="fit-content">Open top end Tooltip</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" placement="left-start">
    <Text w="fit-content">Open left start Tooltip</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" placement="left-end">
    <Text w="fit-content">Open left end Tooltip</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" placement="bottom-start">
    <Text w="fit-content">Open bottom start Tooltip</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" placement="bottom-end">
    <Text w="fit-content">Open bottom end Tooltip</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" placement="right-start">
    <Text w="fit-content">Open right start Tooltip</Text>
  </Tooltip>

  <Tooltip label="へっ！きたねぇ花火だ" placement="right-end">
    <Text w="fit-content">Open right end Tooltip</Text>
  </Tooltip>
</VStack>

Copied!

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

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

編集可能な例

<VStack>
  <Tooltip label="へっ！きたねぇ花火だ" animation="scale">
    <Text w="fit-content">Open scale Tooltip</Text>
  </Tooltip>

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

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

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

  <Tooltip label="へっ！きたねぇ花火だ" animation="right">
    <Text w="fit-content">Open right Hover</Text>
  </Tooltip>
</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!

無効にする

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

編集可能な例

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

Copied!

常に表示する

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

編集可能な例

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

Copied!

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

前Popover 次Tour