Skip to content
Docent

Customize

Arrows, spotlight and overlay

Twenty-one 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
s-curve leaves toward one side and arrives from the other, like a flowchart link
arc a wide swing out to the side that lands at an angle
zigzag sharp teeth between two straight runs
coil a run of small loops, like a spring
block a heavy bar under a solid head; at home in brutalist themes
swoosh a tapered brush stroke that swells in the middle
glow a curve with a soft halo in its own color, for dark and neon themes
marker a thick felt-tip stroke with a chunky head
double two fine rails that split and meet again under the head

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 3 kB, loads the first time a tour uses one, so tours with the default caret never download it.

A connector always lands on the part of the target’s edge that faces the popover, so a sidebar or a full-width banner gets the same short, angled line as a button. When the target is too big to sit beside and the popover ends up on top of it, the line leaves the card sideways and lands on the stretch of edge the card does not cover; only a target the card hides completely falls back to the caret.

LiveNineteen 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

Three looks under one name

Section titled “Three looks under one name”

Setting an arrow, a spotlight and an overlay for each tour gets repetitive. Three built-in looks bundle the common combinations, and a tour picks one by name:

options: { template: 'hint' }
Name What it does Suits
spotlight the default: dimmed page, soft cutout, small caret walking someone through a task
hint no dimming so the page stays usable, a glowing ring, a curved arrow, a narrower card a tip beside one feature
announcement the page blurs away, no arrow, no ring, a wider card something to read, not to do

They are ordinary templates, so registering a template of the same name replaces the built-in one, and anything the tour or the step sets still wins.

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.