r-onboarding r-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 see the default arrow CSS on the bottom of the page

background

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

How to update

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

size

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

How to update

:root {
  --r-onboarding-step-arrow-size: 14px;
}

Default arrow CSS

[data-r-onboarding-wrapper] [data-popper-arrow]::before {
  content: '';
  background: var(--r-onboarding-step-arrow-background, white);
  top: 0;
  left: 0;
  transition: transform 0.2s ease-out,visibility 0.2s ease-out;
  visibility: visible;
  transform: translateX(0px) rotate(45deg);
  transform-origin: center;
  width: var(--r-onboarding-step-arrow-size, 10px);
  height: var(--r-onboarding-step-arrow-size, 10px);
  position: absolute;
  z-index: -1;
}
[data-r-onboarding-wrapper] [data-popper-placement^='top'] > [data-popper-arrow] {
  bottom: 5px;
}
[data-r-onboarding-wrapper] [data-popper-placement^='right'] > [data-popper-arrow] {
  left: -4px;
}
[data-r-onboarding-wrapper] [data-popper-placement^='bottom'] > [data-popper-arrow] {
  top: -4px;
}
[data-r-onboarding-wrapper] [data-popper-placement^='left'] > [data-popper-arrow] {
  right: -4px;
}
z-index
Basic