Next.js Discord

Discord Forum

Shadcn popovertrigger and tooltiptrigger dont work well on same target

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
<Tooltip>
                <TooltipTrigger asChild>
                  <Popover open={open} onOpenChange={handleOpenChange}>
                    <PopoverTrigger asChild>
                      <Button variant={open ? 'outline' : 'ghost'} size="icon">
                        <List className="h-4 w-4" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="p-4 w-96">
                      <UpNextList />
                    </PopoverContent>
                  </Popover>
                </TooltipTrigger>
                <TooltipContent>Description</TooltipContent>
              </Tooltip>


I have the above. however when I swap tooltip and popover position to be directly outside button, both of them dont work at the same time. One or the either works
thanks in advance
Answered by B33fb0n3
try it like this:
<Tooltip>
                <TooltipTrigger asChild>
  <div>
                  <Popover open={open} onOpenChange={handleOpenChange}>
                    <PopoverTrigger asChild>
                      <Button variant={open ? 'outline' : 'ghost'} size="icon">
                        <List className="h-4 w-4" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="p-4 w-96">
                      <UpNextList />
                    </PopoverContent>
                  </Popover>
  </div>
                </TooltipTrigger>
                <TooltipContent>Description</TooltipContent>
              </Tooltip>
View full answer

4 Replies

@Philippine Crocodile <Tooltip> <TooltipTrigger asChild> <Popover open={open} onOpenChange={handleOpenChange}> <PopoverTrigger asChild> <Button variant={open ? 'outline' : 'ghost'} size="icon"> <List className="h-4 w-4" /> </Button> </PopoverTrigger> <PopoverContent className="p-4 w-96"> <UpNextList /> </PopoverContent> </Popover> </TooltipTrigger> <TooltipContent>Description</TooltipContent> </Tooltip> I have the above. however when I swap tooltip and popover position to be directly outside button, both of them dont work at the same time. One or the either works thanks in advance
B33fb0n3
try it like this:
<Tooltip>
                <TooltipTrigger asChild>
  <div>
                  <Popover open={open} onOpenChange={handleOpenChange}>
                    <PopoverTrigger asChild>
                      <Button variant={open ? 'outline' : 'ghost'} size="icon">
                        <List className="h-4 w-4" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="p-4 w-96">
                      <UpNextList />
                    </PopoverContent>
                  </Popover>
  </div>
                </TooltipTrigger>
                <TooltipContent>Description</TooltipContent>
              </Tooltip>
Answer
B33fb0n3
@Philippine Crocodile solved?
@B33fb0n3 <@153697470604509185> solved?
Philippine CrocodileOP
yes thank you so much
B33fb0n3
happy to help