flowbite
flowbite copied to clipboard
Tooltip component performance issues with multiple instances - lazy mounting suggestion
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
- Create a page with multiple Tooltip components (10+ instances)
- Monitor performance using browser dev tools
- Notice increased load time and reduced responsiveness
- 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:
- Only mount the tooltip content when the trigger element is hovered/focused
- Unmount content when tooltip is hidden
- Add a prop for preloading if immediate display is required
thanks <3