Is it possible to use Tooltip with Popover?

[adirizky54]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://stackblitz.com/edit/izdn5j?file=src%2FApp.vue

Steps to reproduce

Click the button to trigger popover

Describe the bug

In my case, i have button with tooltip and when click on that button popover should be appear.

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[zernonia]

Hey! Yeah you can totally compose both component together. Will be moving into discussion if you have more question ya 😁

[marchewadm]

Hi. As previously mentioned, it is possible to use these components together.

To achieve this, you’ll need PopoverAnchor component, which will use PopoverTrigger functionality inside TooltipTrigger. Here is how it works:

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  PopoverRoot,
  PopoverAnchor,
  PopoverTrigger,
  PopoverContent,
  PopoverPortal,
  TooltipRoot,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from 'radix-vue';
</script>

<template>
  <PopoverRoot>
    <PopoverAnchor asChild>
      <TooltipProvider>
        <TooltipRoot>
          <TooltipTrigger asChild>
            <PopoverTrigger
              class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
            >
              <Icon icon="radix-icons:mixer-horizontal" />
            </PopoverTrigger>
          </TooltipTrigger>
          <TooltipContent
            class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-grass11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
            side="top"
            :sideOffset="10"
          >
            That's the tooltip!
          </TooltipContent>
        </TooltipRoot>
      </TooltipProvider>
    </PopoverAnchor>
    <PopoverPortal>
      <PopoverContent
        class="rounded p-5 w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.green7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
        side="bottom"
        :sideOffset="10"
      >
        Some text...
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

I also noticed in your code that you’re passing :as-child="true". You can shorten this to as-child or asChild and the code will work the same. Cheers! 😃