Overlay
Spotlight overlay that highlights the target element with a cutout.
The tour overlay renders a full-screen SVG backdrop with a cutout around the target element. It draws attention to the active step and dims the rest of the page. Pass false to disable.
Config
| Property | Type | Default | Description |
|---|---|---|---|
padding | number | 8 | Pixels the cutout extends beyond the target |
borderRadius | number | 8 | Corner radius of the cutout in pixels |
isAnimated | boolean | true | Whether the spotlight animates between steps |
hasCloseOnBackdropClick | boolean | true | Close the tour when clicking outside the target |
aria | Partial<ComponentAriaProps> | — | ARIA attributes |
customClasses | Partial<BordaTourOverlayComponentClasses> | — | Custom CSS classes |
customStyles | Partial<BordaTourOverlayComponentStyles> | — | Custom inline styles |
await borda.mount({
steps: [
{
target: '#sidebar',
title: 'Navigation',
description: 'Browse sections here.',
placement: 'middle-end',
},
],
tourOverlay: {
padding: 12,
borderRadius: 12,
isAnimated: true,
hasCloseOnBackdropClick: true,
},
});
Disabling
await borda.mount({
steps: [...],
tourOverlay: false,
});
Customization
tourOverlay: {
customClasses: {
root: 'my-overlay',
backdrop: 'opacity-50',
},
customStyles: {
backdrop: {
fill: 'rgba(0, 0, 0, 0.7)',
},
},
}
Interface
interface BordaTourOverlayProps {
padding: number;
borderRadius: number;
isAnimated: boolean;
hasCloseOnBackdropClick: boolean;
aria: Partial<ComponentAriaProps>;
customClasses: Partial<BordaTourOverlayComponentClasses>;
customStyles: Partial<BordaTourOverlayComponentStyles>;
}