v147 · CSS · JavaScript · demo

Tooltip Reveal

Tooltips built entirely in ::after pseudo-elements. Hover to show; when the transitionend fires on the ::after, event.pseudoTarget identifies which pseudo-element completed — the handler then "locks" the tooltip green to confirm it fired, without needing a real DOM node for the tooltip.

Chrome 147+ — event.pseudoTarget on TransitionEvent. In older browsers the event fires on the host element and pseudoTarget is null — the log shows both states.

Hover the buttons to show tooltips · watch the event log · the tooltip turns green when transitionend fires on the ::after pseudo-element

transitionend events

— Hover a button to start —

// event.pseudoTarget on TransitionEvent — Chrome 147+
// Tells you if the transition fired on a pseudo-element, not the element itself.

button.addEventListener('transitionend', (event) => {
  if (event.pseudoTarget) {
    // The transition fired on ::after (the tooltip bubble)
    console.log('Tooltip transition done on', event.pseudoTarget);
    // CSSPseudoElement { type: '::after', ... }
    handleTooltipShown(event.target);
  } else {
    // Transition fired on the host element itself
    console.log('Host element transition', event.propertyName);
  }
});

// Without pseudoTarget: both transitions (element + ::after) fire on the
// same event.target, making it impossible to distinguish which layer finished.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference