Hi! First, thank you for your great lib!

When we render a lot of popper, the browser will drastically slow down (due to popper.js) Do you know how to render the popper on the fly ? Or a way to render the content only when the selector is hovered ?

Thx you!

hey great work! i'm just switching to vue 3 and used vue-tippy before

what i'm struggling with:

situation 1: often i load more content from server when tippy is shown. i COULD solve this with the show-event but its really dirty ^^ it would be nice if i nut just could "import" the close-function, but also isOpen example: <template #content="{close, isOpen}">

if this would be possible i could conditionally decide what to render and trigger what to fetch for the server

situation 2: is it possible to use 1 popper for multiple elements? in vue-tippy i could use :to="element" to change the element where the popper was bound to why: in a table with 100 rows and 3 columns where every column has a popper, this would be 300 poppers nice would be to have 3 popper, one for each column and when i hover over a table-cell i will change a variable so the content within the popper can update is that possible?

Hey, I've been using your popper component for a long time now, but I tried upgrading to the newest version today in hopes to resolve an issue I'm having, but I am getting a crash anytime I upgrade to a version higher than 1.2.1. I was on 1.1.0 previously. I did a few installs one version at a time and found that everything runs ok for 1.1.0, 1.2.0 and 1.2.1. But anything higher than that and I get the following runtime crash...

I don't see any open issues related to this, so I wanted to get your input, if you have the time. Anything that immediately comes to mind that I might be missing? Thanks!

Hi, great work on the library I am enjoying it! I was using Vue-3-popper v1.2.1 and Vue 3.1.2 and it works fine, but when I try to upgrade Vue to 3.2.x and Vue-3-popper to 1.3.0 I get strange runtime errors that I cannot explain. Hoping you can help me fix it.

These are the 2 errors I see, which prevents my entire view from loading.

I've followed the documentation and made my own wrapper component for the Popper component. I use it like this in my view: <PopoverIcon class="d-inline-flex" :content="$tc('contractOverview.table.contractExpirationWarning', { count: item.data.remainingDays})"><i class="pi pi-exclamation-circle" /></PopoverIcon> However, when I try to upgrade to Vue 3.2 even the sample component does not work for me. I think it could be related to the slot property, but seeing as even the example does not work I don't know how to fix it. Any idea what could be causing this?

Apologies if I'm getting this wrong, but it appears to apply styling to the element the popper is attached to:

element.style {
    border: 12px solid transparent;
    margin: -12px;
    --23121010: 9999;
}

I would suggest styling of the attached element is removed and left to the user.

Hey, I love what you've got so far! I do have a specific need though for our client and I was going to see if you could help me out? Basically, when using the "hover" option for the Popper, we would like to keep the popper open as long as the user is hovering over either the trigger element or the popper itself. We are using this to provide a user some options (with buttons for confirming/rejecting and such) when hovering over certain elements. Is there any way we can make that happen? I'd appreciate it, and thanks for your time!

Hi! First of all; great job writing this very easy to use popper component!

I would like to request a feature regarding conditional rendering. I have the following scenario:

<template>
  <Popper arrow hover>
    <button> hover me! </button>
    <template #content v-if="condition ">
      Show popper only when condition is met
    </template>
  </Popper>
</template>

Shown result

I get an empty popper element on hover, due to the fact that I conditionally render the content template.

Expected result

I can pass a show prop to the Popper component, or the popperNode checks if the content slot is defined: https://github.com/valgeirb/vue3-popper/blob/main/src/component/Popper.vue#L18

I would like the popper element to not be rendered / shown when I explicitly say so. It can be visible by default (implicitly) of course.

Right now there is no way to tell Popper to close when you hover over it with mouse. Sometimes it is useful when there are buttons behind popper and you can't click on them because popper is in front of them.

This is an issue only when you set the mode to hover=true

It would be nice to have an option to hide it on hover like this

<Popper :hover="true" :closeOnHover="true">
    ....
</Popper>

If you have a Popper with a closeDelay and hover props and you

1. Hover over the trigger
2. Leave the trigger
3. Hover again before it closes

It still closes. It should stay open.

You should remove the usage of directives and use composable for click away... for example: https://vueuse.org/core/onClickOutside/

They aren't working in SSR apps, and require custom transformers in build tools.

Vue documentation says:

We recommend to prefer using components as the abstraction mechanism instead of directives.

Even though I have set the placement to "top" it still flips to bottom when it want to. Is there a way to force placement to always be top?

<Popper :hover="true" arrow placement="top" ...>
    ....
</Popper>

Related request https://github.com/valgeirb/vue3-popper/issues/74

• Tested in dev mode, works like a charm ✅
• Prop is properly reactive ✅

would be glad to see it merged soon and shipped in a release

**When ı switched pages to quickly popper wasn't disconnect ** Popper can't reach "disconnect" function

error in popper.esm.js:129:34 line

Please help me

Description of the bug vue3-popper: v1.5.0 Applying offset overlaps with nearby items. I'm trying to move the tooltip to the right side of the column and if I have the tooltip item below with the same offset it won't let me hover over and open the popup.

Reproduction link Place 2 tooltip items nearby and apply offsetDistance="100".

Expected behavior Have the ability to specify which side to offset (offsetLeft, offsetRight, offsetTop, offsetBottom)

Screenshots

Description of the bug Clicking on "Guide" in the top right corner removes the button demo and shows a 404 message.

To Reproduce Steps to reproduce the behavior:

1. Go to https://valgeirb.github.io/vue3-popper/
2. Click on 'Guide' (top right corner)
3. New URL is https://valgeirb.github.io/vue3-popper/guide/what-is-vue-popper.html
4. It's the same as the landing page with a 404 message instead of the button demo

... assuming it's meant to link to this: https://valgeirb.github.io/vue3-popper/guide/what-is-vue-3-popper.html

Expected behavior Being taken to a new page with a guide

Screenshots

The old version vue popper had the ability to turn off preventOverflow so that a container would not cut off the modal. This version does not have that ability and my modals are getting cut off by a container that has an overflow set.