search

floating-ui / floating-ui

A JavaScript library to position floating elements and create interactions for them.
https://floating-ui.com
MIT License
29.93k stars 1.6k forks source link

[React] tooltip use `shift` middleware with `crossAxis: true` option might results in tooltip flashing #2435

Closed wulftn closed 1 year ago

wulftn commented 1 year ago

Describe the bug when using shift middleware with crossAxis: true option, if the tooltip content is too large, the tooltip keeps flashing.

To Reproduce https://codesandbox.io/s/eloquent-breeze-2n9y59?file=/src/App.tsx It is modified from floating-ui React's "Basic tooltip" example with the following changes:

  1. large size tooltip content.
  2. use shift middleware with crossAxis: true option.
  3. use useHover with delay: 200.

Steps to reproduce the behavior:

  1. Go to the codesanbox.
  2. Hover the trigger button.

Expected behavior The tooltip should stay open since we now hover the tooltip.

Context:

atomiks commented 1 year ago

This can be fixed with safePolygon:

import { useHover, safePolygon } from '@floating-ui/react';

useHover(context, { handleClose: safePolygon() });