flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Tooltip component performance issues with multiple instances - lazy mounting suggestion

Open huylexuan44 opened this issue 7 months ago • 0 comments

Description

Describe the bug The Flowbite Tooltip component causes significant performance issues when multiple instances are used on a page. Each tooltip mounts its content immediately on page load regardless of whether it's visible, causing unnecessary renders and slowing down the application.

To Reproduce

  1. Create a page with multiple Tooltip components (10+ instances)
  2. Monitor performance using browser dev tools
  3. Notice increased load time and reduced responsiveness
  4. Check React profiler to see all Tooltip contents being mounted simultaneously

Expected behavior Tooltips should only mount their content when needed (on hover/focus), not on initial page load.

Proposed solution Implement lazy loading for tooltip content:

  1. Only mount the tooltip content when the trigger element is hovered/focused
  2. Unmount content when tooltip is hidden
  3. Add a prop for preloading if immediate display is required

thanks <3

huylexuan44 avatar May 08 '25 03:05 huylexuan44