Next.js Discord

Discord Forum

CSS question with Shadcn

Unanswered
California pilchard posted this in #help-forum
Open in Discord
California pilchardOP
I have a problem in my NextJS app using Shadcn. I use a lot @container for being able to make component responsive not depending of the viewport but depending of the container. The probleme is when using @container in parent, and in children having a Tooltip (from Shadcn), the Tooltip is broken. There is an example :
<div className='@container w-full flex items-center justify-center'>
        <Tooltip>
          <TooltipTrigger>
            <Button
              size="icon"
              variant={'action'}
              className="rounded-full"
            >
              A BUTTON
            </Button>
          </TooltipTrigger>
          <TooltipContent side="bottom">Connectez-vous</TooltipContent>
        </Tooltip>
      </div>

Without @container its working... but I really need to use container query but maybe I them them badly ?

thx !

1 Reply

California pilchardOP
Using TooltipPortal fix the problem :
<Tooltip>
            <TooltipTrigger asChild {...tooltipTrigger}>
                {children}
            </TooltipTrigger>
            <TooltipPortal>
                <TooltipContent side="bottom" align="center" {...tooltipContentProps} {...props} />
            </TooltipPortal>
        </Tooltip>