## 事象
ダイアログを開いた直後に `Tooltip` がいきなり表示されてしまう。ホバーしたときまで表示されないでほしい。
![[2025-11-11-06-48-34.avif]]
```html
<script setup lang="ts">
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
</script>
<template>
<div class="flex min-h-screen items-center justify-center">
<Dialog>
<DialogTrigger> Edit Profile </DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
</div>
</template>
```
### 環境
| 対象 | バージョン |
| ---------------- | ------ |
| [[shadcn-vue]] | 2.3.2 |
| [[Reka UI]] | 2.6.0 |
| [[Tailwind CSS]] | 4.1.17 |
## 原因
ダイアログを開いた直後に `Tooltip` の要素にフォーカスが当たっているため。`Tooltip` は `TooltipTrigger` の要素がフォーカスされると中身が表示される仕様になっている。
## 解決方法
> [!unresolved]
> フォーカスしたときに中身を表示しないようにする方法はなさそう。アクセシビリティ的にNGだからな気はする...。
## 回避策
`@opan-auto-focust.prevent` を追加して、オートフォーカスの動作を抑制する。
```diff
<Dialog>
<DialogTrigger> Edit Profile </DialogTrigger>
- <DialogContent>
+ <DialogContent @open-auto-focus.prevent>
<DialogHeader>
```
## 参考
- [Dialog Auto Focus · unovue/shadcn-vue · Discussion #832](https://github.com/unovue/shadcn-vue/discussions/832)