Wrong placement?

[Menighin]

Hi! I'm having a hard time placing the steps where I want. I have a app built with Quasar in which I have a side Menu, much like this one:

I have set vue-tour properties like:

    data() {
        return {
            steps: [
                {
                    target: '#wat',
                    header: {
                        title: 'Menu'
                    },
                    params: {
                        placement: 'left'
                    },
                    content: `Small content`
                }
            ]
        };
    },

And it is being rendered like:

Two unexpected things:

• Having the placement set to left I was expecting the tooltip would be on the left side of the div, like popper shows. If I set it to right it goes to the left side of the div
• I was expecting the tooltip to be on the corner of the div, not in the center.

To make it worse, if I put more content in the tooltip it gets even uglier:

What am I missing? =s

[HZooly]

We have some known issues with current display of Vue Tour step in sandboxed elements such as sidebar. It's not Quasar fault, nor your code, it comes from Vue Tour.

Unfortunately, I don't think there is any solution at the moment.

Be patient, we will rework on Vue Tour as soon as Vue 3 will be released, and we will take care of this placement issue.

[2192403]

I had a similiar issue like this and to solved i had to rewrite the vue-tour with the new popper version

[valpet]

Any update on this? I have these issues too, but within Vuetify drawers. My client wants a tour... well yesterday so for me waiting for Vue 3 is a bit far away, especially as a project is often depending on other stuff too that might not get updated right away.

So, with this said, I hope you will consider releasing a version based on popper 2 that fix these issues for Vue 2

[duncanmcclean]

Yeah, I'm in the same boat with a project right now.

We're currently in the process of implementing a new tour for new users but if this isn't going to be fixed, we'll likely have to use another package or build something ourselves.

We're likely not going to update this project to Vue 3 in the foreseeable future, like @valpet, as we depend on a bunch of other packages that don't yet support the latest version of Vue.

[jonalxh]

Same problem here with a Bootstrap vue sidenav.