ArrowTooltip

🌏 English | 한국어

ArrowTooltip lets you implement balloon-shaped tooltips in Android Compose.

Key Features

• Simple Composable Function: Easily add tooltips to your desired UI elements using the ArrowTooltip Composable function.
• Arrow Shape Customization: Precisely adjust the tooltip's position by freely setting the arrow's position (top, bottom, left, right) and alignment (Anchor start, center, end).
• Various Style Options: Customize various style attributes such as tooltip container color, rounded corners, arrow size, and spacing between the tooltip and anchor to create tooltips that match your app's design.

Getting Started

Add the dependency in your build.gradle.kts file:

dependencies {
    implementation("io.github.msseodev:arrowtooltip:0.0.2")
}

Usage

You can show or hide the tooltip depending on the value of visible.

@Composable
fun BasicTooltipExample() {
    var tooltipVisible by remember { mutableStateOf(false) }

    ArrowTooltip(
        visible = tooltipVisible,
        tooltipContent = {
            Text("I am a basic arrow tooltip!")
        }
    ) {
        Button(onClick = { tooltipVisible = !tooltipVisible }) {
            Text("Show/Hide tooltip")
        }
    }
}

Tooltip Position and Arrow Shape Settings

You can customize the tooltip's arrow position and alignment using TooltipShape and ArrowTooltipProperties.

@Composable
fun PositionedTooltipExample() {
    var tooltipVisible by remember { mutableStateOf(false) }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        ArrowTooltip(
            visible = tooltipVisible,
            tooltipContent = { Text("I am arrow tooltip!") },
            tooltipShape = TooltipShape(
                cornerRadius = 8.dp,
                arrowSize = 8.dp,
                arrowPosition = TooltipShape.ArrowPosition.Top
            ),
            properties = ArrowTooltipProperties(
                tooltipAlignment = ArrowTooltipAlignment.AnchorCenter
            )
        ) {
            Button(onClick = { tooltipVisible = !tooltipVisible }) {
                Text(text = "Toggle tooltip")
            }
        }
    }
}

Note

The ArrowPosition and the tooltip's position are opposite to each other. If ArrowPosition is Top, the tooltip is positioned below the anchor, and if it is Left, the tooltip is positioned to the right of the anchor.