Stylish
A tooltip that shows contextual information when the anchor is hovered or focused — the Material Design 3 tooltip counterpart.
The content is the anchor that triggers the tooltip. Hovering over the anchor (on pointer devices) or focusing it (via keyboard navigation) shows the tooltip after delayMillis. The tooltip is positioned according to placement relative to the anchor and animated with a fade transition that respects the platform's reduced-motion preference (see isStylishReducedMotionEnabled).
The tooltip surface carries the test tag stylish_tooltip for UI tests; callers can override it by passing their own Modifier.testTag(...) in modifier. The tooltip text is exposed to screen readers via contentDescription semantics.
StylishTooltip(
text = "Add a new item",
placement = TooltipPlacement.Bottom,
) {
IconButton(onClick = { }) {
Icon(Icons.Default.Add, contentDescription = null)
}
}Parameters
The tooltip text content, shown inside the popup surface and exposed to screen readers via semantics.
Modifier applied to the anchor wrapper Box.
Background color of the tooltip surface. Defaults to MaterialTheme.colorScheme.inverseSurface.
Text color of the tooltip. Defaults to MaterialTheme.colorScheme.inverseOnSurface.
Shape of the tooltip surface. Defaults to RoundedCornerShape with 4 dp.
Text style for the tooltip text. Defaults to MaterialTheme.typography.bodySmall.
Placement of the tooltip relative to the anchor. Defaults to TooltipPlacement.Bottom.
Delay in milliseconds before the tooltip appears after the anchor is hovered or focused. Defaults to 500.
The anchor content that triggers the tooltip.