AI 툴팁 생성기.

Create a tooltip component that wraps a single trigger child and renders a short plain-text hint on pointer enter and on focus-visible. Use a dark slate panel with 13px white text, 6px vertical and 10px horizontal padding, a 6px radius, a 240px max width and an 8px offset from the trigger, plus a 6px arrow aimed at the trigger. Open after a 300ms delay and close after 100ms so the pointer can cross the gap without the panel vanishing. Dismiss on Escape, on blur and on scroll. Give the panel role="tooltip" and link it to the trigger with aria-describedby only while it is open, rather than leaving hidden markup in the tree. Fade and translate 4px on entry, and drop the transition entirely under prefers-reduced-motion.

Create a tooltip for an icon-only button where the tooltip text is the only name the control has. Put that string in aria-label on the button and do not also set aria-describedby, so the same words are not announced twice. The visible panel exists for sighted pointer users: dark surface, 12px text, a single line that does not wrap under 200px. Open on hover after a 400ms delay but open immediately on focus-visible, since a keyboard user has already committed to the control. Close on Escape, on blur and on pointer leave. Keep the button hit area at least 44px even when the glyph is 20px, and skip rendering the panel entirely when a coarse pointer is detected.

Create a tooltip with collision-aware placement: a preferred side prop of top, bottom, left or right, an explicit fallback order, and shifting along the cross axis when the panel would overflow the viewport or the nearest scrolling ancestor. Add a 6px arrow that re-anchors to the trigger centre after any flip or shift, clamped so it never slides past the panel corner radius. Recompute position on scroll and resize behind a requestAnimationFrame throttle, and close rather than reposition once the trigger leaves the visible area. Keep the aria-describedby relationship stable across repositioning so the description is not re-announced. Use role="tooltip" and plain text content with no interactive children.

Create a tooltip provider that shares open state across a group of triggers in a toolbar. The first tooltip in the group waits the full 300ms open delay; while any tooltip in the group is open, moving to a sibling trigger swaps the content with no delay and no exit animation, so the panel appears to slide along the row. Leaving the group entirely closes after a 150ms grace period. Reuse a single positioned panel element rather than mounting one per trigger, and update its aria-describedby target as the active trigger changes. Escape closes the group and returns focus behaviour to normal. Under prefers-reduced-motion, replace the slide with an instant content swap.

Create a tooltip that renders a label line plus a secondary line, with an optional keyboard shortcut rendered as a small monospace chip aligned to the right of the label. Cap the panel at 260px, allow the description to wrap to two lines, and keep line-height at 1.4 so the two lines read as one block. Content stays non-interactive: no links, no buttons, no selectable code — if the user needs to click inside, use a popover. Announce the whole panel as one description via aria-describedby so the shortcut is read as part of the sentence rather than as a separate node. Open after 300ms, close after 100ms, dismiss on Escape and blur.

Create a conditional tooltip for truncated text: compare scrollWidth against clientWidth on the target element and only register hover and focus handlers when the text is actually clipped, so a fully visible cell never shows a tooltip repeating itself. Re-measure on resize and whenever the text content changes, using a ResizeObserver rather than a window listener. When active, show the full string in a dark panel capped at 320px with wrapping enabled, positioned below the cell to avoid covering the row header. Make the truncated element focusable with tabindex="0" only while the tooltip is registered, so keyboard users can reach it without collecting empty tab stops across the whole table.