V-tooltip appears outside the screen on mobile

Question

I'm struggling to stop vue tooltip from appearing outside the screen.

I have this simple implementation:

<span>
    class="features-tooltip"
    v-tooltip="{ content: 'Long string here' }">
</span>

How do I make tooltip fit the window frame?

Thanks for help

Answer 1

Solution to your problem is pretty simple. You just have to add one additional property boundariesElement: 'window' to your tooltip object.

So in your case it would look like this:

<span>
    class="features-tooltip"
    v-tooltip="{ content: 'Long string here', boundariesElement: 'window'}">
</span>