Image
Display an image above the tooltip heading with default or bleed variants.
The tour image renders above the tooltip heading. It supports two visual variants — default (inset within tooltip padding) and bleed (stretched to tooltip edges, only top corners rounded). Pass false to disable.
Config
| Property | Type | Default | Description |
|---|---|---|---|
variant | BordaTourImageVariant | DEFAULT | Visual presentation — default or bleed |
aria | Partial<ComponentAriaProps> | — | ARIA attributes |
customClasses | Partial<BordaImageCustomClasses> | — | Custom CSS classes |
customStyles | Partial<BordaImageCustomStyles> | — | Custom inline styles |
customHtml | Partial<BordaImageCustomHtml> | — | Custom HTML that replaces the image entirely |
The image src and alt come from each step's image field, not from the component config.
import { BordaTourImageVariant } from '@retoo/borda';
await borda.mount({
steps: [
{
target: '#dashboard',
title: 'Dashboard',
description: 'Your main overview.',
image: { src: '/tour/dashboard.png', alt: 'Dashboard overview' },
placement: 'bottom-center',
},
],
tourImage: {
variant: BordaTourImageVariant.BLEED,
},
});
Disabling
await borda.mount({
steps: [...],
tourImage: false,
});
Per-step disable:
steps: [
{
target: '#element',
title: 'No image here',
description: 'This step has no image.',
placement: 'bottom-center',
tourImage: false,
},
]
Interface
interface BordaTourImageProps {
variant: BordaTourImageVariant;
aria: Partial<ComponentAriaProps>;
customClasses: Partial<BordaImageCustomClasses>;
customStyles: Partial<BordaImageCustomStyles>;
customHtml: Partial<BordaImageCustomHtml>;
}