Hints

Web only. A hint is a dot sitting on an element, on its own, with no tour running. Click it and a small popover explains the thing. Dismiss it and it stays gone.

tsxOpen in Claude

Open in ChatGPT

import { TourHint } from "@tourkit/react";

<TourHint
  id="filters"
  target="filters"
  title="Filter by route"
  body="Narrow rides to the ones passing your gate."
/>;

Prop	Meaning
`id`	Identifies the hint, and is the storage key it remembers itself under.
`target`	Same resolution as a step target: a registered id, a `data-tour-id`, or a CSS selector.
`title`, `body`	The copy. Both optional.
`placement`, `align`	Where the popover opens. Defaults to `bottom` and `center`.
`dismissLabel`	The dismiss button's text. Defaults to `Got it`.
`theme`	A theme override for this hint alone.
`className`	Added to the dot, alongside `tourkit-hint-dot`.

Hints must be rendered inside <TourProvider>, which is where they read the storage adapter and coordinate with each other.

Behaviour worth knowing

One at a time. Opening a hint closes any other. Clicking an open hint's dot closes it.

Dismissal is remembered. Pressing the dismiss button writes dismissed to tourkit:hint:{id} through the provider's storage adapter, and the hint never renders again on that device. Clear the key to bring it back.

tsOpen in Claude

Open in ChatGPT

await storage.remove("tourkit:hint:filters");

A missing target renders nothing. No dot, no error, no warning. A hint pointing at an element that has not mounted yet appears as soon as it does.

The dot tracks its element. Scroll, resize or a layout change moves it, through the same Floating UI autoUpdate the tour card uses.

Styling

Every part carries a stable class: tourkit-hint, tourkit-hint-dot, tourkit-hint-card, tourkit-hint-title, tourkit-hint-body, tourkit-hint-dismiss. The dot's pulse honours prefers-reduced-motion through the browser.