jsx-a11y/mouse-events-have-key-events

Keyboard users never hover, so a tooltip or a preview that only shows on hover doesn't exist for them. Focus is the keyboard's version of hover, so pair onMouseOver with onFocus, and onMouseOut with onBlur.

The rule only checks HTML elements, not components.

Configure

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/mouse-events-have-key-events" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"jsx-a11y/mouse-events-have-key-events" = ["error", {
  hoverInHandlers = ["onMouseOver"],
  hoverOutHandlers = ["onMouseOut"],
}]

Examples

Reported:

const help = (
  <button onMouseOver={showTooltip} onMouseOut={hideTooltip}>
    Help
  </button>
);

Not reported:

const help = (
  <button
    onMouseOver={showTooltip}
    onFocus={showTooltip}
    onMouseOut={hideTooltip}
    onBlur={hideTooltip}
  >
    Help
  </button>
);

Options

Option	Default	What it does
hoverInHandlers	["onMouseOver"]	Handlers that need an onFocus next to them.
hoverOutHandlers	["onMouseOut"]	Handlers that need an onBlur next to them.

Your list replaces the default. onMouseEnter isn't checked unless you add it:

const card = <div onMouseEnter={showPreview} />;

const card = <div onMouseEnter={showPreview} />;