Usage with Quasar components

[pulsardev]

Usage with Quasar components

[mmorainville]

Hi,

You're right, we could take a look at this for the next release.

As for your problem, it really seems to be because the v-tour is inside the sidebar then.
But yes, it's also a problem with Popper because they should not take into account a position: fixed container to absolutely position the step.

Anyway, by overriding the v-step component you could indeed use an other library than Popper (or a custom version of it) to make the step pops where you want.

It's weird though that putting the v-tour in App.vue does not work. It could be because the sidebar is not in the DOM yet (hidden with a v-if maybe?) when the tour starts.
You could try to launch the tour only when the DOM of the sidebar is fully loaded as we use document.querySelector. I'm pretty sure solving this and having the v-tour in App.vue will solve your problem.

Also I'm not very familiar with Quasar, but if the calculations are off if you put it in the q-layout it may be because the DOM is not fully constructed when the tour starts. You could try to surround the tour start() method by a setTimeout() of 1 second or a Vue.$nextTick() to see if it improves things.

setTimeout(() => {
  this.$tours['myTour'].start()
}, 1000)

Or you could use the new v-tour option startTimeout: https://pulsar.gitbooks.io/vue-tour/tour-configuration.html.

<v-tour [...] :options="{ startTimeout: 1000 }"></v-tour>

It could also be because Quasar displays the sidebar even if it's not opened and just make a sliding animation from outside the viewport into the viewport, but then depending on when your start the tour, Popper can calculate the position based on an intermediate animation step.
So same here, you should try to start the tour when everything is ready and correctly displayed.
In the end it all goes down to whether or not the document.querySelector is using the correct element.

[mmorainville]

Hi @FerrielMelarpis,

Mmh interesting... I think it comes from the fact that the sidebar is too narrow, and so Popper has to reposition the step. You could try to increase the width of the sidebar manually using the devtools to see if this is it.

For a quick, dirty and temporary fix you could try to position the step relative to the bottom of your component using:

{
  ...
  params: {
    placement: 'bottom' // or 'top'
  }
}

Also, normally Popper position the steps using position: absolute so I'm also guessing that your sidebar has a relative positioning and that your put the v-tour inside the sidebar.

You can try to put the v-tour outside of it, in your App.vue for example, at the end, so that it will end up somewhere before the closing body tag.

[FerrielMelarpis]

Hmm I think its a Popper.js issue.
I tried other libraries like vue-popperjs which does exactly what the v-step component does, and I found out that the detection of position that Popper.js is somehow wrong?
The computed positioning of the popperNode is absolute on a fixed positioned component like the sidebar that I made. It makes the popper flip when it overflows the dimension of the target element (i.e. sidebar).

Putting v-tour outside to the App.vue will not work for some reason I'm not sure of but if I put it outside the slot component but still inside the q-layout, it works although the computation of the offsets of the popperNode is way off.

Anyway, thanks for your time in helping me investigating this one. I might just override the default v-step component.

<v-tour name="tour" :steps="steps">
  <my-step slot-scope="tour">
   ...

[FerrielMelarpis]

It would be nice to have this library export the components only instead of installing it globally since not the whole app needs the component.

[edum18]

Any update on this? I'm still with this issue

[jonalxh]

Same issue here, but I'm trying to use it in columns not sidebar and behaviour is the same.

[jprogin]

I have the same problem and I think that's because one parent has the style

overflow: scroll

No workaround found until now

[mmorainville]

If someone come across this issue, and as it may be related to Popper v1.x, you can try to update to vue-tour v2.x which uses Popper v2.x.

[jonalxh]

@mmorainville But the latest official release is v1.6.

[HZooly]

@mmorainville But the latest official release is v1.6.

You can find 2.0.0 here : https://github.com/pulsardev/vue-tour/releases/tag/v2.0.0