SushiTooltip

A customizable tooltip component for the Sushi design system.

SushiTooltip displays contextual information or hints when users hover over or interact with UI elements. The component supports customizable content, including text, images, and custom layouts, with configurable appearance options like color, shape, and pointer position.

Example

The SushiTooltip component is used within a SushiTooltipBox to create tooltips:

// First, create a tooltip state and remember a coroutine scope
val tooltipState = rememberTooltipState()
val scope = rememberCoroutineScope()

// Basic text tooltip
SushiTooltipBox(
    positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
    tooltip = {
        SushiTooltip(
            props = SushiTooltipProps(
                text = SushiTextProps(
                    text = "This is a basic tooltip with text only",
                    color = SushiTheme.colors.text.inverse
                )
            )
        )
    },
    state = tooltipState
) {
    // Anchor element - the tooltip will be positioned relative to this
    SushiButton(
        props = SushiButtonProps(text = "Hover or Click Me"),
        onClick = {
            scope.launch {
                tooltipState.show()
            }
        }
    )
}

Customization Examples

// Tooltip with prefix and suffix icons
SushiTooltip(
    props = SushiTooltipProps(
        text = SushiTextProps(
            text = "Important information",
            color = SushiTheme.colors.text.inverse
        ),
        prefixImage = SushiImageProps(
            painterResource(R.drawable.ic_info),
            width = 20.dp,
            contentDescription = "Info",
            colorFilter = ColorFilter.tint(SushiTheme.colors.yellow.v500.value)
        ),
        suffixImage = SushiImageProps(
            painterResource(R.drawable.ic_warning),
            width = 20.dp,
            contentDescription = "Warning"
        )
    )
)

// Custom colored tooltip
SushiTooltip(
    props = SushiTooltipProps(
        text = SushiTextProps(
            text = "Warning: This action cannot be undone",
            color = Color.White
        ),
        containerColor = SushiTheme.colors.red.v600,
        prefixImage = SushiImageProps(
            painterResource(R.drawable.ic_warning),
            width = 20.dp,
            contentDescription = "Warning",
            colorFilter = ColorFilter.tint(Color.White)
        )
    )
)

// Custom shape tooltip with no caret
SushiTooltip(
    props = SushiTooltipProps(
        text = SushiTextProps(
            text = "This tooltip has a custom shape with no caret",
            color = SushiTheme.colors.text.inverse
        ),
        caretSize = DpSize.Unspecified,  // No caret
        shape = RoundedCornerShape(16.dp)  // More rounded corners
    )
)

// Tooltip with custom content
SushiTooltip(
    props = SushiTooltipProps(
        containerColor = SushiTheme.colors.blue.v700
    ),
    content = {
        Column(modifier = Modifier.padding(16.dp)) {
            SushiText(
                props = SushiTextProps(
                    text = "Custom Tooltip",
                    type = SushiTextType.Bold600,
                    color = Color.White
                )
            )

            // More custom content...
        }
    }
)

Programmatically Showing/Hiding Tooltips

// Show the tooltip
scope.launch {
    tooltipState.show()
}

// Hide the tooltip
scope.launch {
    tooltipState.dismiss()
}

Component API

SushiTooltipProps

Parameter	Description
text	Properties for configuring the tooltip's text content
prefixImage	Optional image to display before the text
suffixImage	Optional image to display after the text
containerColor	Background color of the tooltip (defaults to inverse surface color)
caretSize	Size of the tooltip's pointer/caret (width and height)
shape	Shape of the tooltip container (defaults to rounded corners)
shadowElevation	Shadow depth for the tooltip to create visual hierarchy

SushiTooltipBox Parameters

Parameter	Description
positionProvider	Provider that determines tooltip position relative to anchor
tooltip	Tooltip content to be displayed when triggered
state	State object that controls when the tooltip is shown or hidden
focusable	Whether the tooltip can receive focus
enableUserInput	Whether user interactions can trigger the tooltip
content	The anchor content that the tooltip will be attached to