Using Placement

The placement property is a type of NanoPopPosition which is a string that represents the placement of the step.

typescript

type Direction = 'top' | 'left' | 'bottom' | 'right';
type Alignment = 'start' | 'middle' | 'end';
export type NanoPopPosition = `${Direction}-${Alignment}` | Direction;

The value of the placement property is a string that can be one of the following:

top, top-start, top-middle, top-end, left, left-start, left-middle, left-end, bottom, bottom-start, bottom-middle, bottom-end, right, right-start, right-middle, right-end.

If not provided, the placement property will default to right-middle.

vue

<script setup>
  const steps = [{
    target: '[data-step=0]',
    content: 'Top Placement',
    placement: 'top' // Placed at top-middle if enough space
  }];
</script>

Target

INFO

vuejs-tour will automatically adjust the placement of the step if there is not enough space.

Using Placement ​

Using Placement