floating-vue

floating-vue copied to clipboard

Using:

• v-tooltip 2.0.3
• VueJS: 2.6
• using it as Vue.use(VTooltip)
• using the readme example css

After I compile down to production on some occasions, some buttons don't show tooltips. To be more precise, the tooltip tries to appear, but it's positioned on top of the button going into this show/hide loop making the button un-clickable.

As you may see in the screenshot, at times everything is ok. Just some cases have issues, haven't been able to figure out which ones.

It's all good in development mode. Not sure what triggers this in production. I made sure no v-tooltip classes get stripped or anything like that.

The only thing I see different from putting dev and prod side-by-side is that the prod version renders the tooltip with the translate property with about 10 pixels less than the dev version.

If anyone has an ideea about why this is happening I'm more than glad to try and fix this myself.

Thank you,

Same issue here, I figured you could use those options for buttons { defaultHideOnTargetClick: false, autoHide: false } to prevent those weird things from happening

Please provide a runnable minimal reproduction so I can look at this issue. :pray:

This happens when the tooltip cannot figure out where to position itself because its too close to the bounds of whatever its measuring its bounds against.

This causes the tooltip to end up directly in the way of your current mouse position, causing the hovered element to lose mouseover focus because the tooltip now has it.

Seems to be quite common with various tooltips/popovers. I fixed mine by setting a boundariesElement value, eg: v-tooltip="{ boundariesElement: 'body', content: app.name }"

Seems to be quite common with various tooltips/popovers. I fixed mine by setting a boundariesElement value, eg: v-tooltip="{ boundariesElement: 'body', content: app.name }"

This helps and works like a charm! Thank you!