Photonix UI - React Components, Templates & Figma Design System

SpotlightTooltip

Highlights a feature with a spotlight effect and a tooltip explanation.

Preview

Usage

"use client";

import { Box, Button, SpotlightTooltip } from '@photonix/ultimate';
import { useRef, useState } from 'react';

export default function SpotlightTooltipBasicExample() {
    const [open, setOpen] = useState(false);
    const buttonRef = useRef<HTMLButtonElement>(null);

    return (
        <Box w="100%" display="flex" justifyContent="center" p="2xl">
            <Button ref={buttonRef} onClick={() => setOpen(true)}>
                Show Spotlight
            </Button>
            <SpotlightTooltip
                isOpen={open}
                anchorEl={buttonRef.current}
                title="New Feature"
                description="This button now has an amazing new feature! Check it out."
                onClose={() => setOpen(false)}
                primaryAction={{ label: 'Learn More', onClick: () => {} }}
            />
        </Box>
    );
}

Component API

SpotlightTooltip

Prop	Type	Default	Description
image	`string`	`-`	Image URL to display at top
title	`string`	`-`	Title text
description	`string`	`-`	Description text
primaryAction	`SpotlightTooltipAction`	`-`	Primary action button (filled style)
secondaryAction	`SpotlightTooltipAction`	`-`	Secondary action button (text style)
onClose	`(() => void)`	`-`	Called when close button is clicked
position	`SpotlightTooltipPosition`	`'top'`	Arrow position
variant	`SpotlightTooltipVariant`	`'black'`	Color variant
className	`string`	`-`	Additional CSS class

Variants

Colors

Available in black and white themes.

Colors

"use client";

import { Box, Flex, SpotlightTooltip } from '@photonix/ultimate';

export default function SpotlightTooltipColorsExample() {
    return (
        <Flex gap="xl" wrap="wrap">
            <Box position="relative">
                <SpotlightTooltip
                    title="Black Theme"
                    description="The default high-contrast dark theme."
                    variant="black"
                    isOpen={true}
                    className="relative-demo"
                />
            </Box>
            <Box position="relative">
                <SpotlightTooltip
                    title="White Theme"
                    description="A clean light theme alternative."
                    variant="white"
                    isOpen={true}
                    className="relative-demo"
                />
            </Box>
        </Flex>
    );
}

With Actions

Tooltips can include primary and secondary actions.

With Actions

"use client";

import { Box, Flex, SpotlightTooltip } from '@photonix/ultimate';

export default function SpotlightTooltipActionsExample() {
    return (
        <Flex gap="xl" wrap="wrap">
            <Box position="relative">
                <SpotlightTooltip
                    title="Actionable Tooltip"
                    description="You can perform actions directly here."
                    primaryAction={{ label: 'Confirm' }}
                    secondaryAction={{ label: 'Skip' }}
                    isOpen={true}
                    className="relative-demo"
                    variant="black"
                />
            </Box>
            <Box position="relative">
                <SpotlightTooltip
                    title="Light Actionable"
                    description="Actions in the white theme."
                    primaryAction={{ label: 'Next' }}
                    secondaryAction={{ label: 'Back' }}
                    isOpen={true}
                    className="relative-demo"
                    variant="white"
                />
            </Box>
        </Flex>
    );
}

With Image

Include a header image for rich onboarding experiences.

With Image

"use client";

import { Box, SpotlightTooltip } from '@photonix/ultimate';

export default function SpotlightTooltipImageExample() {
    return (
        <Box position="relative">
            <SpotlightTooltip
                title="Visual Context"
                description="Images help explain complex features better than text alone."
                image="/feature_sheet_hero.png"
                primaryAction={{ label: 'Next' }}
                isOpen={true}
                className="relative-demo"
            />
        </Box>
    );
}

SpotlightTooltip

Preview

Component API

SpotlightTooltip

Variants

Colors

With Actions

With Image

On this page