tooltip doesnt positioned propeply, if parent element have overflow-y: scroll

[ivanushkaPr]

Hello dear developers! I find a very disturbing issue.

I got a div with max-height: 500px. In this div i render ul with overflow-y: scroll with max-height: 250px and a bunch of li, that will be rendered, added and deleted dynamically. But, if there is only one list item, then v-tooltip will be positioned incorrectly.

As example, if i use v-tooltip.bottom, then div rendered into DOM will contain x-placement="top" attribute. But, if i add another list item, the tooltip of first list item will be positioned properly, unfortunately tooltip for the last item in list, will be positioned incorrectly again and bottom will be switched to top.

Is it expected behavior or not? I think this is issue, because all of tooltip rendered into body.

Only one element in list: Two elements in list:

[snezzzzhana]

I have a similar issue.

[revidee]

In my case this was because the boundariesElement (https://github.com/Akryum/v-tooltip#other-options) was left as default (probably parent element). Setting this to document.body resolve the issue for me.

So, try to pass (in addtion to your options) { boundariesElement: document.body } to the tooltip directive.

Edit: To be more clear: The reason this is happening is because v-tooltip checks if the tooltip fits into the parent element. By default, it tries to not leak out of the boundary element. That's why you are seeing an "incorrect" placement, which is actually correct: To not leak the container by your top positioning, it gets limited to the top of your parent element's boundingRect, and is pushed down a bit due to your custom margin-top styling (i think).

[RomainMazB]

The reason this is happening is because v-tooltip checks if the tooltip fits into the parent element. By default, it tries to not leak out of the boundary element. That's why you are seeing an "incorrect" placement, which is actually correct: To not leak the container by your top positioning, it gets limited to the top of your parent element's boundingRect, and is pushed down a bit due to your custom margin-top styling (i think).

This saved me a lot of time, but just as an addition, the correct option is defaultBoundariesElement as mentioned in the README.

And as a reminder just for NuxtJS beginners: because you are now using the document element, you'll need to only load the plugin on client side:

plugins: [
  { src: '~plugins/v-tooltip', mode: 'client' }
]

[crestinglight]

Hopefully to help someone else, I had the same issue, but this fix did not quite work for me. What worked was { boundariesElement: 'window' } instead of document.body.