Solution

Keep visibility in one React state value and derive both the bubble and its accessible description link from it.

The problem, in plain English

A tooltip must respond to pointer and keyboard attention. Showing a bubble is only half the job: while it exists, the trigger should identify it as a description.

The mental model

show is the single source of truth. Pointer and focus events update it, then React uses the same boolean to render #library-tip and set aria-describedby.

A first attempt

const [show, setShow] = useState(false);

<button onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
  Hover me
</button>

This works with a mouse, but keyboard focus never changes show. It also omits the relationship that lets assistive technology treat the bubble as the button's description.

The working solution

import { useState } from 'react';
import './styles.css';

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <main className="container">
      <h1>Tooltip</h1>
      <div className="stage">
        <span className="tip-wrap">
          <button
            type="button"
            className="trigger"
            onMouseEnter={() => setShow(true)}
            onFocus={() => setShow(true)}
            onMouseLeave={() => setShow(false)}
            onBlur={() => setShow(false)}
            aria-describedby={show ? 'library-tip' : undefined}
          >
            Hover me
          </button>
          {show && (
            <span id="library-tip" className="tooltip" role="tooltip">
              Saved to your library
            </span>
          )}
        </span>
      </div>
    </main>
  );
}

The event pairs support both input modes. Conditional rendering removes the bubble when closed, and the conditional attribute never points at a missing element.

Walking through one interaction

Tab to the button. onFocus calls setShow(true), React renders #library-tip, and the button gains the matching aria-describedby. Tab away and onBlur clears the state, removing both outputs.

Gotchas

• Supporting hover only — keyboard users never receive the hint; include focus and blur.
• Leaving a stale ID reference — do not keep aria-describedby when the conditionally rendered element is absent.
• Using click as the trigger — a tooltip describes attention, not an activation; click changes its interaction model.

Going further

• Add an open delay and cancel its timer on leave or blur.
• Hide on Escape without moving focus from the trigger.

Alternative solutions

import { useReducer } from 'react';
import './styles.css';

type VisibilityAction = { type: 'show' } | { type: 'hide' };

function visibilityReducer(_: boolean, action: VisibilityAction) {
  return action.type === 'show';
}

export default function App() {
  const [show, dispatch] = useReducer(visibilityReducer, false);

  return (
    <main className="container">
      <h1>Tooltip</h1>
      <div className="stage">
        <span className="tip-wrap">
          <button
            type="button"
            className="trigger"
            onMouseEnter={() => dispatch({ type: 'show' })}
            onFocus={() => dispatch({ type: 'show' })}
            onMouseLeave={() => dispatch({ type: 'hide' })}
            onBlur={() => dispatch({ type: 'hide' })}
            aria-describedby={show ? 'library-tip' : undefined}
          >
            Hover me
          </button>
          {show && (
            <span id="library-tip" className="tooltip" role="tooltip">
              Saved to your library
            </span>
          )}
        </span>
      </div>
    </main>
  );
}