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.
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
customTooltipslot toCoachmarkHostorCoachmarkTarget:When
customTooltipis provided, skip the defaultCoachmarkTooltiprendering 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.