Highlight
Spotlight a single element with or without tooltip.
Use highlight() to draw attention to a single element. You can show a full tooltip with buttons, or just the spotlight overlay with no UI.
With tooltip
const instance = await borda.highlight(
{
target: '#element',
title: 'Single-element spotlight',
description: 'Use highlight() instead of mount() when you only need to draw attention to one element.',
placement: ComponentPlacement.BOTTOM_START,
},
{
tourProgress: false,
tourButtons: {
prev: false,
next: false,
finish: { label: 'Got it' },
},
},
);
Overlay only
Show just the spotlight cutout with no tooltip, buttons, or close button:
const instance = await borda.highlight(
{
target: '#element',
title: '',
description: '',
placement: ComponentPlacement.BOTTOM_START,
},
{
tourOverlay: { padding: 12, hasCloseOnBackdropClick: true },
tourTooltip: false,
tourProgress: false,
tourButtons: false,
closeButton: false,
tourSkip: false,
},
);