Skip to content
Docent

Customize

Arrows, spotlight and overlay

Twelve arrow styles, four spotlight shapes, six rings and four overlay styles, all set in the tour JSON.

Three things connect the popover to the page: the arrow between the popover and the element, the spotlight cut around the element, and the overlay that dims everything else. The defaults are a small caret, a rounded spotlight with a hairline ring, and a dimmed page. Each can change for a whole tour or for a single step, in plain JSON.

Arrows

Section titled “Arrows”
options: { arrow: 'curve' }          // for the whole tour
steps: [{ id: 'save', arrow: 'pin' }] // or one step
Style Looks like
caret the default notch on the popover’s edge
none nothing
line, dashed, dotted a straight line with an arrowhead
curve, curve-dashed a curve that bows outward
squiggle a wavy line
loop a line with one small loop, like a hand-drawn annotation
elbow a right-angle connector with rounded corners
sketch a double stroke that reads as hand-drawn
pin a dotted line ending in a dot on the target

Connector styles (everything except caret and none) place the popover a little further away so the line has room, and draw in after the popover settles. Their code, about 1.8 kB, loads the first time a tour uses one, so tours with the default caret never download it.

LiveTen drawn arrows, one per step

Spotlight

Section titled “Spotlight”
options: { spotlight: { shape: 'circle', ring: 'pulse', padding: 10 } }
Option Values
shape rounded (default), rect, pill, circle
ring hairline (default), none, glow, pulse, dashed, solid
padding, radius pixels; radius applies to rounded

circle circumscribes the target, so it suits buttons and icons more than wide cards. pulse repeats gently to draw the eye and stops for users who prefer reduced motion.

LiveShapes, then rings

Overlay

Section titled “Overlay”
options: { overlay: { style: 'blur', blur: 6, opacity: 0.4 } }
Style Effect
dim a tinted scrim (default)
blur the scrim plus a soft blur of the page
vignette clear near the target, darker toward the edges
none no scrim, and the page stays usable, for lighter hint-style tours

color and opacity tint the scrim; blur sets the blur radius. With none, connectors and the ring switch to the accent color so they stay visible on the page.

LiveBlur, vignette, and no overlay

Where to set it

Section titled “Where to set it”

Settings stack. Each layer overrides the one before it:

  1. renderer options, for every tour: createTour(tour, { renderer: { arrow: 'curve' } }),
  2. a template,
  3. the tour’s options,
  4. the step itself.

So a tour can use curved arrows throughout, and one step can switch to a pin for a small icon. Colors come from the connector and ring theme tokens.

The devtools Edit tab switches all of these live on a running tour.