Skip to content

Custom tooltip composable slot API #35

Description

@aldefy

Problem

The built-in tooltip layout (title, description, CTA in a column) doesn't always match client design systems. Designers want full control over tooltip composition — custom CTA shapes, different text layouts, brand-specific styling.

Example: Client's Figma shows a full-width green pill CTA button with no card background, but the library renders a fixed-size blue rounded CTA in a card.

Proposed Solution

Add a customTooltip slot to CoachmarkHost or CoachmarkTarget:

CoachmarkHost(
    controller = controller,
    customTooltip = { target, currentStep, totalSteps, onNext, onDismiss ->
        // Full composable freedom
        Column {
            Text(target.title, style = MaterialTheme.typography.headlineSmall)
            Text(target.description)
            Button(
                onClick = onNext,
                shape = RoundedCornerShape(50),
                modifier = Modifier.fillMaxWidth(),
            ) {
                Text(target.ctaText)
            }
        }
    },
)

When customTooltip is provided, skip the default CoachmarkTooltip rendering but keep connector, cutout, and scrim behavior.

Why This Matters

Client feedback: "Composition off" — the built-in tooltip layout cannot match their Figma designs closely enough. This is the most requested capability for production adoption.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestv1.3Version 1.3 milestone

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions