最新
工具提示Basic Tooltip
A short hint that appears above a control on hover and on keyboard focus.
#tooltip#hint#hover
3 个框架初级
Loading…
A tooltip that previews on hover or focus and latches open when the trigger is clicked.
<!--
CSS-only baseline: hover/focus preview only. The "click to pin it open" latch is
a persistent toggle - state - so it lives in the React/TS tabs. aria-pressed
there tells a screen reader whether it is pinned; the pin survives the pointer
leaving, which is the whole point.
-->
<span class="group relative inline-flex">
<button type="button" aria-describedby="tt-pin" class="cursor-help rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
Build #4821
</button>
<span id="tt-pin" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-30 w-max max-w-xs -translate-x-1/2 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium leading-snug 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">Passed in 3m 12s on commit a1b2c3d.</span>
</span>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 加载时朗读的无障碍标签。 |
children必填 | ReactNode | - | Trigger |
Hover and focus preview the hint; a click pins it so it survives the pointer leaving, and `aria-pressed` reflects the pinned state to assistive tech. Escape unpins and closes. The Tailwind tab is the hover/focus baseline since the latch is persistent state.