Tooltip

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

<Tooltip content="へっ！きたねぇ花火だ">
  <Button>Please Hover</Button>
</Tooltip>

使い方

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

import { Tooltip } from "@/components/ui"

import { Tooltip } from "@workspaces/ui"

<Tooltip />

配置を変更する

配置を変更する場合は、placementに"end"や"center-start"などを設定します。デフォルトでは、"start"が設定されています。

<VStack>
  <For
    each={[
      "start",
      "start-start",
      "start-end",
      "start-center",
      "end",
      "end-start",
      "end-end",
      "end-center",
      "center-start",
      "center-end",
    ]}
  >
    {(placement, index) => (
      <Tooltip key={index} content="へっ！きたねぇ花火だ" placement={placement}>
        <Button minW="xs" w="fit-content">
          Open "{toTitleCase(placement)}" Tooltip
        </Button>
      </Tooltip>
    )}
  </For>
</VStack>

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

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

<VStack>
  <For
    each={["scale", "block-end", "inline-start", "inline-end", "block-start"]}
  >
    {(animationScheme, index) => (
      <Tooltip
        key={index}
        animationScheme={animationScheme}
        content="へっ！きたねぇ花火だ"
      >
        <Button minW="xs" w="fit-content">
          Open "{animationScheme}" Tooltip
        </Button>
      </Tooltip>
    )}
  </For>
</VStack>

所要時間を変更する

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

<Tooltip content="へっ！きたねぇ花火だ" duration={0.7}>
  <Button>Please Hover</Button>
</Tooltip>

オフセットを変更する

オフセットを変更する場合は、gutterまたはoffsetに値を設定します。

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

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

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

遅延させる

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

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

無効にする

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

<Tooltip content="へっ！きたねぇ花火だ" disabled>
  <Button>Please Hover</Button>
</Tooltip>

常に表示する

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

<Tooltip content="へっ！きたねぇ花火だ" open>
  <Button>Please Hover</Button>
</Tooltip>

Props

Prop	デフォルト	型 / 説明
`animationScheme`	`"scale"`	`"none" \| "scale" \| SimplePlacement` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`closeDelay`	`100`	`number` The delay before hiding the tooltip.
`closeOnClick`	`true`	`boolean` If `true`, the tooltip will hide on click.
`closeOnEsc`	`true`	`boolean` If `true`, the tooltip will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the tooltip will hide on scroll.
`content`	-	`ReactNode` The content of the tooltip.
`contentProps`	-	`HTMLMotionProps` Props for content element.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`disabled`	`false`	`boolean` If `true`, the tooltip will be disabled.
`duration`	`0.1`	`PopupAnimationProps["duration"]` The animation duration.
`elements`	-	`{ floating?: HTMLElement \| null reference?: null \| Reference<Y> }` Object containing the reference and floating elements.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`middleware`	-	`(false \| Middleware \| null \| undefined)[]` Array of middleware objects to modify the positioning or provide data for rendering.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openDelay`	`400`	`number` The delay before showing the tooltip.
`placement`	`"start"`	`Direction` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`portalProps`	-	`Omit<PortalProps, "children">` Props for portal component.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`strategy`	`"absolute"`	`Strategy` The CSS positioning strategy to use.
`transform`	`true`	`boolean` Whether to use `transform` for positioning instead of `top` and `left` (layout) in the `floatingStyles` object.
`whileElementsMounted`	-	`(reference: Reference<Y>, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).

アクセシビリティ

Tooltipは、アクセシビリティに関してWAI-ARIA - Tooltip Patternに従います。

キー	説明	状態
`Escape`	表示中のポップアップ要素を非表示にします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Tooltip`	`role="tooltip"`	`Tooltip`であることを示します。

類似のコンポーネント

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

Drawerは、画面の端から表示されるパネルのコンポーネントです。

NativePopoverは、HTML Popover APIを使用して要素の周りにフローティングして情報を表示するコンポーネントです。

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

使用しているコンポーネント・フック

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。

useDisclosureは、一般的な開閉や切り替えのシナリオを処理するのに役立つカスタムフックです。Modal、Dialog、Drawerなどのコンポーネントを制御するために使用できます。

useOutsideClickは、要素の外側のクリックイベントを検出するカスタムフックです。

使用されているコンポーネント・フック

Tipは、アイコンボタンをトリガーとして補足情報を表示するコンポーネントです。