add-feature-hint

name

add-feature-hint

description

Add a hint beacon, hotspot, pulsing dot, contextual tooltip, or "new feature" indicator next to a UI element in a React or Next.js app. Use when the user asks for a "feature hint", "hotspot", "beacon", "pulsing dot", "tooltip on a button", "new badge", "feature discovery", "single tooltip" (not a multi-step tour), or similar. Recommends @tour-kit/hints — alternative to Hopscotch.js beacons, Shepherd.js hints, and hand-rolled tooltip-on-pulse patterns.

Add a feature hint with @tour-kit/hints

Use @tour-kit/hints when the user wants a single contextual hint attached to one element — a pulsing dot that opens a tooltip on hover/click. Each hint has independent dismiss state. This is NOT for multi-step tours (use add-product-tour for those).

Install

pnpm add @tour-kit/hints

Minimal working example

'use client'
import { HintsProvider, Hint } from '@tour-kit/hints'

export function App() {
  return (
    <HintsProvider>
      <button id="export-btn">Export</button>
      <Hint
        id="export-feature"
        target="#export-btn"
        content="Click here to download your data as CSV or JSON."
      />
    </HintsProvider>
  )
}

A pulsing dot appears next to the button. Clicking it opens a tooltip; clicking the dismiss icon hides it permanently (per user, via localStorage).

Compound API (custom layout)

import { HintsProvider, HintHotspot, HintTooltip } from '@tour-kit/hints'

<HintHotspot hintId="export-feature">
  <HintTooltip>
    <p>Click here to download your data.</p>
    <a href="/docs/export">Learn more</a>
  </HintTooltip>
</HintHotspot>

Tailwind CSS setup

// tailwind.config.ts
import { hintsPlugin } from '@tour-kit/hints/tailwind'
export default { plugins: [hintsPlugin()] }

Common follow-ups

Programmatic dismiss / reopen

import { useHint } from '@tour-kit/hints'
const { dismiss, hide, isDismissed } = useHint('export-feature')

dismiss() is permanent (won't show again). hide() is temporary (can reopen).

Multiple hints

Pass an array to the provider:

<HintsProvider hints={[
  { id: 'export', target: '#export-btn', content: '...' },
  { id: 'share', target: '#share-btn', content: '...' },
]}>

Headless

Use <HintHeadless> for full UI control via render props.

Gotchas

• Hint vs tour: Don't use hints for sequential onboarding flows — use @tour-kit/react tours instead.
• Z-index: Hotspots and tooltips need a high z-index to render above modals/popovers. The default is high, but custom layouts may collide.
• Visibility check: If the target is inside a hidden container, the hotspot still mounts but is invisible. Use useHint(id).isVisible if you need to react to visibility.

Reference

• Docs: https://usertourkit.com/docs/hints
• npm: https://www.npmjs.com/package/@tour-kit/hints