Delphi Design

Guided tooltips help users discover features through interactive tours and contextual hints.

Interactive Demo

Click "Start Tour" to see how guided tooltips work in a step-by-step onboarding flow.

Onboarding Tour

Positioning

The side prop controls tooltip placement relative to the trigger element.

Bottom (Default)

Top

Code Example

import { GuidedTooltip, TooltipProvider, Button } from "@delphi/ui";
import { useState } from "react";

function OnboardingTour() {
  const [currentStep, setCurrentStep] = useState(1);

  return (
    <TooltipProvider>
      <div className="flex gap-4">
        <GuidedTooltip
          step={1}
          title="Add to your Mind"
          description="Upload content to train your AI"
          isOpen={currentStep === 1}
          onAction={() => setCurrentStep(2)}
          side="bottom"
        >
          <Button>Mind</Button>
        </GuidedTooltip>

        <GuidedTooltip
          step={2}
          title="Edit your Profile"
          description="Customize how you appear"
          isOpen={currentStep === 2}
          onAction={() => setCurrentStep(3)}
          side="bottom"
        >
          <Button>Edit</Button>
        </GuidedTooltip>

        <GuidedTooltip
          step={3}
          title="Share your Delphi"
          description="Send to friends and family"
          actionText="Done"
          finalStep
          isOpen={currentStep === 3}
          onAction={() => setCurrentStep(0)}
          side="bottom"
        >
          <Button>Share</Button>
        </GuidedTooltip>
      </div>
    </TooltipProvider>
  );
}

API Reference

Prop	Type	Default	Description
`step`	`number`	-	The current step number to display
`title`	`string`	-	The tooltip title
`description`	`string`	-	The tooltip description text
`isOpen`	`boolean`	`false`	Controls tooltip visibility
`onAction`	`() => void`	-	Callback when action button is clicked
`actionText`	`string`	`"Next"`	Custom text for the action button
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Position relative to trigger
`finalStep`	`boolean`	`false`	Marks this as the last step (changes button style)
`children`	`ReactNode`	-	The trigger element

Keep tours short — 3-5 steps maximum for new user onboarding

Allow users to dismiss or skip the tour entirely

Persist tour completion state so it doesn't show again

Position tooltips to avoid obscuring important content

Block critical functionality until the tour is complete

Show tours on every page visit — respect user preferences

Use guided tooltips for error messages or alerts