I'm using shadcn/ui components in a Next.js 14 project with the app directory structure. All overlay components (Tooltip, Select dropdown, etc.) are appearing at the top-left corner of the screen instead of being positioned relative to their trigger elements. No matter where I use these components, they are always coming from the top left side of the page.
Video:
Screenshots:
Environment:
- Next.js: 15+
- React: 18+
- shadcn/ui: Latest version
- Radix UI: Latest version
- Tailwind CSS: 4.x
What I've tried:
- Added TooltipProvider at root level:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<TooltipProvider>
<main>{children}</main>
<Toaster />
</TooltipProvider>
</body>
</html>
);
}
- Added CSS fixes to globals.css:
[data-radix-popper-content-wrapper] {
z-index: 50;
}
body {
position: relative;
}
- Updated shadcn/ui components:
npx shadcn-ui@latest add tooltip --overwrite
npx shadcn-ui@latest add select --overwrite
Current component structure:
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link
href={isDisabled ? '#' : `/tools/${tool.href}`}
onClick={(e) => isDisabled && e.preventDefault()}
className="inline-block"
tabIndex={-1}
>
<button
className={cn(
'my-1.5 flex cursor-pointer items-center space-x-2 rounded-xl px-4 py-3 pr-10 text-left transition-all duration-100',
isActive ? 'bg-pallet-primary' : 'bg-pallet-secondary',
isDisabled && 'bg-pallet-disabled cursor-not-allowed',
)}
aria-disabled={isDisabled}
tabIndex={isDisabled ? -1 : 0}
>
<Icon className="h-5 w-5 flex-shrink-0" />
<div className="min-w-0 text-sm font-medium">{tool.name}</div>
</button>
</Link>
</TooltipTrigger>
{isDisabled && (
<TooltipContent>
<p>Coming soon</p>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
Expected behavior:
Tooltip should appear above/below the button element
Actual behavior:
Tooltip always appears at the top-left corner of the screen, same issue occurs with Select dropdowns
Has anyone encountered this positioning issue with shadcn/ui components? What's the root cause and how can it be fixed?
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;