El Tour

Tour Component

Tour is a popup component for guiding users through a product with step-by-step instructions.

When to Use

• Product onboarding
• Feature tours
• User guidance
• Tutorial walkthroughs

Basic Usage

<template>
  <el-button ref="buttonRef">Start Tour</el-button>
  
  <el-tour v-model="open">
    <el-tour-step
      :target="buttonRef?.$el"
      title="Start Tour"
      description="Click this button to start the tour"
    />
    <el-tour-step
      :target="inputRef?.$el"
      title="Input Field"
      description="This is an input field"
    />
  </el-tour>
</template>

<script setup>
import { ref } from 'vue'

const open = ref(false)
const buttonRef = ref()
const inputRef = ref()
</script>

Non-modal

<template>
  <el-tour v-model="open" :mask="false" type="primary">
    <el-tour-step
      :target="targetRef"
      title="Non-modal Tour"
      description="This tour doesn't block interactions"
    />
  </el-tour>
</template>

Custom Placement

<template>
  <el-tour v-model="open">
    <el-tour-step
      :target="targetRef"
      placement="right"
      title="Right Placement"
      description="The guide appears on the right"
    />
  </el-tour>
</template>

Custom Mask Style

<template>
  <el-tour
    v-model="open"
    :mask="{
      style: { boxShadow: '0 0 10px rgba(0,0,0,0.3)' },
      color: 'rgba(0, 0, 0, 0.5)'
    }"
  >
    <el-tour-step :target="targetRef" title="Custom Mask" />
  </el-tour>
</template>

API Reference

Tour Attributes

Tour Events

Tour Slots

TourStep Attributes

TourStep Slots

Best Practices

1. Use mask="false" for non-blocking tours
2. Use type="primary" for emphasis
3. Provide clear step descriptions