Vue Tour - Popper (Tooltip) Above Reference - Quasar Framework

[syncmaster]

I have a problem with using vue-tour plugin with quasar framework and I can not find a solution to my problem for now. Let me explain it in more details. I have some poppers that are not showing properly on the page and they are over the elements(reference). https://i.stack.imgur.com/THd3A.png You can see also the arrow position is wrong, and I don't know why this happens. Now I will show you how must look the design. "Upload" button is the reference for the popper. For every other elements on the website vue-tour is working properly, but if I add steps which are inside the menu, I faced the problem. https://i.stack.imgur.com/giRBM.png I have been tried till now several ways to detect the problem, but without success -check styles of the menu and referrence item to detect if some style overwrite popper styles -I read the documentation of vue-tour and popper.js and tried some options to see if something is gonna happen if you need some other information, I'm here and will share with you everything

[mmorainville]

Hi @syncmaster,

This seems to be a common problem due to Popper v1.x. There have been duplicate issues about this topic. You can try to update to vue-tour v2.x which uses Popper v2.x. https://github.com/pulsardev/vue-tour/releases/tag/v2.0.0

[benvd]

I've had similar issues with BootstrapVue (which also uses popper.js under the hood). In my case the problem occurred when the target of the popup is not a block or inline-block (as in display: block;). Not sure if that workaround applies here, though...