Custom Styling
Override tooltip title, description, and button appearance with customStyles.
Customize the look and feel of the tour by overriding inline styles on individual tooltip elements — no source modification.
Code
main.ts
import { useBorda, ComponentPlacement } from '@retoo/borda';
import '@retoo/borda/styles';
const borda = useBorda();
await borda.mount({
steps: [
{
target: '#element',
title: 'Custom styled',
description: 'This tooltip has custom title and description styles.',
placement: ComponentPlacement.BOTTOM_START,
},
],
tourTooltip: {
customStyles: {
title: { color: '#013EFB', fontSize: '18px' },
description: { color: '#3f3f46' },
},
},
tourButtons: {
customStyles: {
next: {
background: '#013EFB',
color: 'rgb(255, 255, 255)',
borderRadius: '8px',
border: 'none',
padding: '6px 16px',
},
},
},
});