नया
टूलटिपBasic Tooltip
A short hint that appears above a control on hover and on keyboard focus.
#tooltip#hint#hover
3 फ्रेमवर्कशुरुआती
Loading…
A tooltip that tracks the pointer as it moves across the trigger, with a fixed fallback for keyboard.
<!--
CSS-only baseline: the hint pins above the trigger on hover/focus. Making it
TRACK the pointer needs per-move coordinate math, which is JS - that is in the
React/TS tabs. When the tip is summoned by keyboard focus (no pointer to
follow) those tabs fall back to exactly this anchored position.
-->
<span class="group relative inline-flex">
<button type="button" aria-describedby="tt-cursor" class="cursor-default rounded-md border border-dashed border-gray-400 bg-white px-6 py-4 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-500 dark:bg-gray-900 dark:text-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
Hover across me
</button>
<span id="tt-cursor" 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">Drag me anywhere</span>
</span>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
childrenआवश्यक | ReactNode | - | Trigger |
The React/TS tabs update coordinates on every `mousemove`; when the tip is summoned by focus instead (no pointer to follow) it falls back to a fixed anchor above the trigger, which is exactly what the CSS-only Tailwind tab renders.