Popover snippet for vue

[Extarys]

Can someone share a snippet on how to properly use Popover with Vue? (The docs doesn't have it for this particular component)

I wonder if it would be possible to open the Popover by listening to mouseover the trigger.

Thanks community :)

[Shyrro]

Hey @Extarys

Thanks for reaching out.

Try this snippet and let me know :

<script setup lang="ts"> 
 import { 
   Popover, 
   PopoverArrow, 
   PopoverArrowTip, 
   PopoverCloseTrigger, 
   PopoverContent, 
   PopoverDescription, 
   PopoverPositioner, 
   PopoverTitle, 
   PopoverTrigger, 
 } from '@ark-ui/vue' 
 </script> 
 <template> 
   <Popover> 
     <PopoverTrigger> 
       <button>click me</button> 
     </PopoverTrigger> 
     <PopoverPositioner> 
       <PopoverArrow> 
         <PopoverArrowTip /> 
       </PopoverArrow> 
       <PopoverContent> 
         <PopoverTitle>Title</PopoverTitle> 
         <PopoverDescription>Description</PopoverDescription> 
         <input type="text" /> 
         <PopoverCloseTrigger> 
           <button>close</button> 
         </PopoverCloseTrigger> 
       </PopoverContent> 
     </PopoverPositioner> 
   </Popover> 
 </template>

[Extarys]

It's working, thank you very much! Any idea if it's possible to open the popover on mouseover? Looked at the code a bit, but I'm unsure how it's suppose to work 😂

[Shyrro]

Hey @Extarys ,

You can attach any events you like to the Popover components. To open/close the popover, you can use the isOpen prop.
You can change that value onmouseover if you want.

Hope that helps !

[anubra266]

@Extarys You can play around with it here
https://arkxamples.vercel.app/popover