v-onboarding v-onboarding

arrow

You can control the popover's arrow size and background values by using CSS variables

If you are using custom UI for the step elements, you need to add arrow CSS manually. You can grab the default arrow CSS from the style section of the Custom UI component example

background

  • Default: white
  • CSS variable name: --v-onboarding-step-arrow-background

How to update

:root {
  --v-onboarding-step-arrow-background: #f5f5f5;
}

size

  • Default: 10px (same value for the both width and height)
  • CSS variable name: --v-onboarding-step-arrow-size

How to update

:root {
  --v-onboarding-step-arrow-size: 14px;
}
z-index
overlay