search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
22k stars 1.54k forks source link

[BUG] - The default Tooltip's z-index is causing it to overlap the Navbar #4033

Open LangRizkie opened 4 days ago

LangRizkie commented 4 days ago

NextUI Version

^2.4.8

Describe the bug

The tooltip is incorrectly positioned and overlaps the navbar when the page is scrolled. I can increase the navbar's z-index to fix this, but it's not ideal as it might unintentionally affect other components.

Your Example Website or App

https://codesandbox.io/p/devbox/goofy-lucy-cjncsk

Steps to Reproduce the Bug or Issue

  1. Use Navbar Component
  2. User Tooltip Component outside the Navbar
  3. Make the body scrollable
  4. Scroll until the Tooltip overlapping the Navbar

Expected behavior

The tooltip must have a rational z-index value instead making it always on the top of everything.

Screenshots or Videos

image

Operating System Version

Windows 10

Browser

Chrome

linear[bot] commented 4 days ago

ENG-1549 [BUG] - The default Tooltip's z-index is causing it to overlap the Navbar

wingkwong commented 4 days ago
  1. please provide a minimal reproducible environment
  2. what is the expected behaviour in your example? the navbar should be on top of the tooltip?
LangRizkie commented 2 days ago
  1. please provide a minimal reproducible environment
  2. what is the expected behaviour in your example? the navbar should be on top of the tooltip?

I have updated the issue with Codesandbox link, the default Tooltip zIndex is 100000 and we can't force to make Navbar zIndex to over than that. We might be facing issue with another absolute/fixed component.