Tooltip

The tour tooltip displays the step's title and description in a positioned card with an optional arrow pointing at the target. It auto-flips to stay within the viewport and never overlaps the target. Pass false to disable.

Config

Property	Type	Default	Description
`size`	`ComponentSize`	`MD`	Size variant scaling padding, gap, min-width and font sizes
`placement`	`ComponentPlacement`	—	Tooltip placement relative to the target
`autoPlacement`	`BordaTourTooltipAutoPlacement \| boolean`	`true`	Auto-flip when placement doesn't fit
`margin`	`number`	`16`	Minimum gap from viewport edges
`offset`	`number`	`8`	Gap between tooltip and target in pixels
`padding`	`number`	`12`	Inner padding in pixels
`arrow`	`BordaTourTooltipArrowProps \| false`	—	Arrow config. Pass `false` to hide.
`animation`	`BordaTourTooltipAnimation \| false`	—	Enter/exit animation settings
`hasGlide`	`boolean`	`false`	Whether the tooltip glides its position between steps
`hasSwipeControl`	`boolean`	`true`	Enable swipe-to-navigate on touch devices
`isHidden`	`boolean`	`false`	Whether the tooltip is currently hidden
`aria`	`Partial<ComponentAriaProps>`	—	ARIA attributes
`customClasses`	`Partial<BordaTourTooltipComponentClasses>`	—	Custom CSS classes
`customHtml`	`Partial<BordaTourTooltipComponentHtml>`	—	Custom inner HTML for title/description
`customStyles`	`Partial<BordaTourTooltipComponentStyles>`	—	Custom inline styles

await borda.mount({
  steps: [
    {
      target: '#element',
      title: 'Title',
      description: 'Description text.',
      placement: 'bottom-center',
    },
  ],
  tourTooltip: {
    offset: 12,
    margin: 20,
    arrow: { placement: 'top-center' },
    autoPlacement: true,
  },
});

Customization

tourTooltip: {
  customClasses: {
    root: 'shadow-xl rounded-2xl',
    title: 'text-lg font-semibold',
    description: 'text-sm text-gray-500',
  },
  customStyles: {
    root: {
      maxWidth: '360px',
    },
  },
}

Replace the tooltip content entirely with customHtml:

tourTooltip: {
  customHtml: {
    title: '<strong>Custom title</strong>',
    description: '<em>Custom description</em>',
  },
}

Swipe navigation (touch)

On touch devices, swiping the tooltip navigates the tour — swipe left for the next step, swipe right for the previous one. A swipe must move at least 50px horizontally and no more than 75px vertically to register, so vertical scrolling near the tooltip doesn't accidentally trigger navigation.

Swiping calls the same next() / prev() handlers as the buttons, so it fires the regular ON_TOUR_NEXT / ON_TOUR_PREV tour events — there's no separate swipe event to subscribe to.

Enabled by default. Disable it globally:

tourTooltip: {
  hasSwipeControl: false,
}

Override it for a single step:

await borda.mount({
  steps: [
    {
      target: '#intro',
      title: 'Welcome',
      description: 'Swipe left or right to navigate.',
      placement: 'bottom-center',
    },
    {
      target: '#chart',
      title: 'Chart',
      description: 'Swipe is off here so it doesn\'t conflict with panning the chart.',
      placement: 'middle-end',
      tourTooltip: { hasSwipeControl: false },
    },
  ],
});

Or scope it to a breakpoint — e.g. only enable swipe below tablet width:

await borda.mount({
  steps: [...],
  tourTooltip: {
    hasSwipeControl: false,
  },
  responsive: {
    768: {
      tourTooltip: { hasSwipeControl: true },
    },
  },
});

Interface

interface BordaTourTooltipProps {
  size: ComponentSize;
  placement: ComponentPlacement;
  offset: number;
  margin: number;
  padding: number;
  arrow: BordaTourTooltipArrowProps | false;
  autoPlacement: BordaTourTooltipAutoPlacement | boolean;
  isHidden: boolean;
  hasGlide: boolean;
  hasSwipeControl: boolean;
  animation: BordaTourTooltipAnimation | false;
  aria: Partial<ComponentAriaProps>;
  customClasses: Partial<BordaTourTooltipComponentClasses>;
  customStyles: Partial<BordaTourTooltipComponentStyles>;
  customHtml: Partial<BordaTourTooltipComponentHtml>;
}

Overlay

Spotlight overlay that highlights the target element with a cutout.

Image

Display an image above the tooltip heading with default or bleed variants.