Next.js 14 App目录下shadcn/ui浮层组件（Tooltip/Select）始终定位在屏幕左上角的问题求助

阿华AIGC实验室

2026-4-2

大家好，我最近在Next.js 14的App目录结构项目里使用shadcn/ui组件，遇到了一个非常头疼的定位问题——所有浮层类组件（比如Tooltip提示框、Select下拉框）都完全不跟随触发元素的位置，不管我把组件放在页面哪个区域，它们一律固定出现在屏幕的左上角。

问题详情

不管是Tooltip还是Select组件，只要是带浮层的，都出现了同样的定位偏差：

示例截图：

环境版本

Next.js: 15+
React: 18+
shadcn/ui: 最新版本
Radix UI: 最新版本
Tailwind CSS: 4.x

已尝试的解决方法

我已经试过几种常见的修复方案，但都没有效果：

在根布局中全局引入TooltipProvider

// 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>
  );
}

在globals.css中添加定位相关的CSS修复

[data-radix-popper-content-wrapper] {
  z-index: 50;
}
body {
  position: relative;
}

重新覆盖安装最新版本的组件

npx shadcn-ui@latest add tooltip --overwrite
npx shadcn-ui@latest add select --overwrite

当前组件结构（以Tooltip为例）

下面是我使用Tooltip的具体代码结构：

<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>