Option for "no target element"

[pulsardev]

Option for "no target element"

[mmorainville]

Hi @jvenema,

It's an interesting idea indeed. A PR would be welcome! :)

[sheehan]

I was able to achieve this with the following step config:

{
  target: 'body',
  content: 'This is a centered pop-up.',
  params: {
    placement: 'none',
    modifiers: {
      computeStyle: {
        enabled: true,
        fn(data) {
          data.styles = Object.assign({}, data.styles, {
            left: '50%',
            top: '50%',
            transform: 'translate(-50%, -50%)'
          });

          return data;
        }
      }
    }
  }
}

(via floating-ui/floating-ui#642 (comment))

[mattgreenfield]

I was after this too and used @sheehan's solution to target 'body' but it does feel like a hack.

I would imagine this being an alternative to providing a target option and I can see a need to position it in different places around the screen.

{
  target: false,
  content: 'This is a centered pop-up.',
  params: {
    placement: 'center', // or 'bottom', 'bottom-left', 'top' etc etc
  },
}

I see there's a PR for similar functionality here https://github.com/pulsardev/vue-tour/pull/51/files

[mmorainville]

PR has been merged: https://github.com/pulsardev/vue-tour/pull/51/files.
But as of now the feature stay limited to the step being placed in the viewport's center.
We'll see to improve that for the Vue 3 version of vue-tour but the Vue 2 version will likely stay like this (you can always manually tweak the CSS on v-step--sticky to place it wherever you want though).