新着
ツールチップBasic Tooltip
A short hint that appears above a control on hover and on keyboard focus.
#tooltip#hint#hover
3 個のフレームワーク初級
Loading…
A row of tooltips that share a delay: the first waits, the rest open instantly while you sweep across.
<!--
The CSS-only baseline: each icon in the toolbar owns an independent tooltip via
group-hover / group-focus-within. The "warm group" behaviour - first tip waits
out the delay, the rest open instantly while your pointer sweeps the row - is
cross-element timing that CSS cannot express, so it lives in the React/TS tabs.
-->
<div class="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1 dark:border-gray-800 dark:bg-gray-900">
<span class="group relative inline-flex">
<button type="button" aria-describedby="tt-grp-bold" class="flex h-9 w-9 items-center justify-center rounded-md text-sm font-bold text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">B</button>
<span id="tt-grp-bold" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-30 w-max -translate-x-1/2 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Bold</span>
</span>
<span class="group relative inline-flex">
<button type="button" aria-describedby="tt-grp-italic" class="flex h-9 w-9 items-center justify-center rounded-md text-sm italic text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">I</button>
<span id="tt-grp-italic" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-30 w-max -translate-x-1/2 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Italic</span>
</span>
<span class="group relative inline-flex">
<button type="button" aria-describedby="tt-grp-under" class="flex h-9 w-9 items-center justify-center rounded-md text-sm text-gray-700 underline hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">U</button>
<span id="tt-grp-under" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-30 w-max -translate-x-1/2 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Underline</span>
</span>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
delay | number | 600 | アニメーション開始までの待機秒数。 |
skipDelay | number | 300 | Skip delay |
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
children必須 | ReactNode | - | Trigger |
Wrap the row in `TooltipGroup`; the first tip opens after `delay`, and once one has opened the group stays "warm" for `skipDelay` so neighbours open with no wait. The Tailwind tab is the CSS-only baseline (independent per-item tips) because shared cross-element timing is genuinely JS.