State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

TooltipBox

Component
in
Material 3
. Since 1.2.0-alpha09

Overview

Code Examples

Material TooltipBox that wraps a composable with a tooltip.

tooltips provide a descriptive message for an anchor. It can be used to call the users attention to the anchor.

Tooltip that is invoked when the anchor is long pressed:

Overloads

TooltipBox

@Composable
@ExperimentalMaterial3Api
fun TooltipBox(
    positionProvider: PopupPositionProvider,
    tooltip: @Composable () -> Unit,
    state: TooltipState,
    modifier: Modifier = Modifier,
    focusable: Boolean = true,
    enableUserInput: Boolean = true,
    content: @Composable () -> Unit,
)

Parameters

NameDescription
positionProviderPopupPositionProvider that will be used to place the tooltip relative to the anchor content.
tooltipthe composable that will be used to populate the tooltip's content.
statehandles the state of the tooltip's visibility.
modifierthe Modifier to be applied to the TooltipBox.
focusableBoolean that determines if the tooltip is focusable. When true, the tooltip will consume touch events while it's shown and will have accessibility focus move to the first element of the component. When false, the tooltip won't consume touch events while it's shown but assistive-tech users will need to swipe or drag to get to the first element of the component.
enableUserInputBoolean which determines if this TooltipBox will handle long press and mouse hover to trigger the tooltip through the state provided.
contentthe composable that the tooltip will anchor to