---
title: Tooltip
description: "`Tooltip`は、要素の補足など短い情報を表示するコンポーネントです。"
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/tooltip/tooltip.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/tooltip
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-tooltip--basic
---

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

## 使い方

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

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

```tsx
import { Tooltip } from "@workspaces/ui"
```

```tsx
<Tooltip />
```

### 表示位置を変更する

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

```tsx
<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"`が設定されています。

```tsx
<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`に数値(秒)を設定します。

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

### オフセットを変更する

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

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

```tsx
<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`に数値(ミリ秒)を設定します。

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

### 無効にする

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

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

### 常に表示する

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

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

## Props

| Prop                             | Default                                                | Type                                                                                 | Description                                                                                                                                                                                    |
| -------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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`). |

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。