🤫

【shadcn/ui】Error: `Tooltip` must be used within `TooltipProvider`の解消方法

2024/08/18に公開

Next.js

React

shadcn/ui

tech

結論

TooltipコンポーネントをTooltipProviderでラップすれば解決します。


<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

参考issue

事象

shadcn/uiのexamples Blockをコピペした時に発生しました。
shadcn/uiというよりradix-uiの仕様らしいです。
ちゃんと公式ドキュメント・issueを見ましょう(自戒)


  <Tooltip>
    <TooltipTrigger asChild>
      <Link
        href="#"
        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
      >
        <Home className="h-5 w-5" />
        <span className="sr-only">Dashboard</span>
      </Link>
    </TooltipTrigger>
    <TooltipContent side="right">Dashboard</TooltipContent>
  </Tooltip>

【発展】なぜTooltipProviderでラップするのか？

結論、TooltipProviderでラッピングすることで「複数のツールチップが共通の設定や制御を共有し、一貫した動作、アクセシビリティ、パフォーマンスを保証する」からです。

いわば、TooltipProviderはTooltip コンポーネントのベースとなる環境を提供してるのですね。

結論

事象

【発展】なぜTooltipProviderでラップするのか？

Discussion