Laravel 13 InertiaJS No Tooltip Provider 🪳

Laravel, the tool tip provider is missing from sidebar.tsx.

Relative path

resources\js\components\ui\sidebar.tsx

Bit missing

<TooltipProvider delayDuration={0}>

How the code looked on older version

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
            className
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

imranbru

1 week ago

Level 4

Good catch. This looks like a scaffolding bug in the starter kit where it missed pulling the TooltipProvider from the upstream shadcn/ui sidebar component.

Your fix is spot on. For anyone else finding this thread, just manually patch your resources/js/components/ui/sidebar.tsx:

Ensure the imports are there at the top:

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

Wrap the main div inside your SidebarContext.Provider:

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
            className
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

If you have a spare few minutes, it's worth opening a quick PR or issue on the Laravel Breeze/Jetstream GitHub repo (depending on which you used to scaffold) so the team can patch the stubs for everyone else.

1 like

Randy_Johnson

1 week ago

Level 8

👍 https://github.com/laravel/react-starter-kit/compare/main...JoshuaHeathcote1987:react-starter-kit:patch-1

Randy_Johnson

1 week ago

Level 8

So confused. Not sure what to do.

https://laravel.com/docs/13.x/contributions

To encourage active collaboration, Laravel strongly encourages pull requests, not just bug reports.

https://github.com/laravel/react-starter-kit/compare/main...JoshuaHeathcote1987:patch-1?expand=1

An owner of this repository has disabled the ability to open pull requests.

Max100

1 week ago

Level 6

It's strange that the maintainers of Laravel repositories make it so hard to even let them know about an issue.

I may not know enough to fix an issue and then create a pull request. But wouldn't they like to know there's a problem?

In this case, even if you have the fix, you can't create a pull request.

Randy_Johnson

1 week ago

Level 8

Completely, I had to ask an LLM for advice. It said that I should make a New Issue. I have no doubts he would have seen this post.

Estinvosh

1 week ago

Level 1

Nice catch I ran into the same thing. Do you think it’s intentional (to keep the sidebar lighter by default), or just a missed sync with shadcn updates? Also curious if anyone noticed side effects without TooltipProvider in more complex layouts (nested tooltips, portals, etc.).

Randy_Johnson

1 week ago

Level 8

Its not intentional because the sidebar is missing, and using AppLayout then throws the error.

Please or to participate in this conversation.