Tooltip — CSS Hover Snippet with 4-Way Positioning

A tooltip is the small label that appears next to an element on hover or focus, used to explain an icon-only button, define a term, or add context without permanently occupying screen space. This snippet builds a reusable tooltip system driven entirely by a data-tip attribute and a data-pos attribute, so adding a new tooltip anywhere on a page requires zero additional CSS or JavaScript.

Data-attribute-driven content

Rather than hardcoding four separate tooltip markups, every trigger element carries data-tip="..." with its message and data-pos="top|bottom|left|right" for its side. A tiny JS loop on page load reads data-tip and writes it into a child .tip span's textContent — using textContent, not innerHTML, so the tooltip text can never be interpreted as markup, which matters if the message ever comes from user data. The positioning itself needs no JavaScript at all: CSS attribute selectors like [data-pos="top"] .tip place the tooltip and its arrow relative to the trigger using position: absolute and the corresponding bottom/top/left/right offset.

The arrow

The small triangle pointing from the tooltip to its trigger is a single 8×8px square rotated 45 degrees (.tip::after { transform: rotate(45deg) }) and positioned so exactly half of it peeks out from behind the tooltip's rounded rectangle. This is simpler and more reliable across browsers than the classic CSS border-triangle trick, and it inherits the tooltip's background color automatically since it shares the same background: #111827.

Hover-intent delay

Tooltips that appear the instant the cursor crosses an element create visual noise as a user's mouse passes over several triggers on its way somewhere else. The transition-delay: 0.35s on the hover/focus rule means the tooltip only appears if the cursor lingers for over a third of a second — long enough to filter out incidental passes, short enough to feel responsive to a deliberate hover. The delay applies only to the *appearing* transition; disappearing is instant, because a laggy exit reads as sluggish in a way a laggy entrance does not.

Positioning math

Each position uses calc(100% + 9px) to place the tooltip 9px past the trigger's edge, then centers it on the perpendicular axis with left: 50%; transform: translateX(-50%) (for top/bottom) or the vertical equivalent (for left/right). The scale(0.92) to scale(1) transform on entry, combined with a transform-origin set to the edge nearest the trigger, makes the tooltip grow out of the element it describes rather than simply fading in place.

Keyboard accessibility

The :focus-visible selector triggers the same reveal as :hover, so keyboard users tabbing through the page see the same tooltips sighted mouse users get — a common accessibility gap in tooltip implementations that rely on :hover alone. The icon-only trigger additionally carries role="img" and aria-label so screen readers announce its purpose even before any tooltip is triggered.

Long-content wrapping

By default .tip uses white-space: nowrap so short labels never awkwardly break. The .tip-wide modifier switches to white-space: normal with a fixed width: 220px, which is what the long-form tooltip in the demo uses — a rule of thumb worth following: keep short tooltips on one line, and give longer explanatory text an explicit wrap width rather than letting it stretch to the viewport edge.

Viewport-edge behavior

This snippet positions tooltips relative to their trigger only — it does not flip a tooltip to the opposite side if it would overflow the viewport. For triggers near a screen edge, pick the data-pos value that points inward, or add a ResizeObserver/getBoundingClientRect check that swaps the data-pos attribute dynamically when an overflow is detected.

See also the popover snippet for click-triggered (rather than hover-triggered) floating panels with richer content, and the avatar stack with tooltip for a specific applied example of this same positioning technique.