kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("com.github.skydoves:balloon:2.0.1")
        }
    }
}

dependencies {
    implementation("com.github.skydoves:balloon:2.0.1")
}

val style = rememberBalloonBuilder {
    setArrowSize(10.dp)
    setArrowPosition(0.5f)
    setWidthRatio(0.7f)
    setPadding(12.dp)
    setCornerRadius(8.dp)
    setBackgroundColor(Color(0xFF785EF0))
    setBalloonAnimation(BalloonAnimation.ELASTIC)
}

val balloonState = rememberBalloonState(style)

Balloon(
    state = balloonState,
    balloonContent = {
        Text(
            text = "Now you can edit your profile!",
            color = Color.White,
        )
    },
) {
    Button(onClick = { balloonState.showAlignTop() }) {
        Text(text = "Edit profile")
    }
}

BalloonHost {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Button(
            modifier = Modifier.balloon(balloonState) {
                Text(text = "Now you can edit your profile!", color = Color.White)
            },
            onClick = { balloonState.showAlignTop() },
        ) {
            Text(text = "Edit profile")
        }
    }
}

balloonState.showAlignTop()  // above the anchor
balloonState.showAlignBottom()  // below the anchor
balloonState.showAlignStart()  // leading side
balloonState.showAlignEnd()  // trailing side
balloonState.showAsDropDown()  // below, leading edges aligned
balloonState.showAtCenter(BalloonCenterAlign.TOP)
balloonState.show(BalloonAlign.BOTTOM, xOffset = 8.dp, yOffset = 4.dp)

balloonState.toggle()
balloonState.dismiss()
balloonState.update(BalloonAlign.TOP)  // move without replaying the animation
balloonState.dismissWithDelay(scope, 1_500L)

balloonState.isVisible  // observable in composition

LaunchedEffect(Unit) {
    firstBalloon.awaitAlignTop()
    secondBalloon.awaitAlignBottom()
    thirdBalloon.awaitAtCenter(BalloonCenterAlign.END)
}

setArrowOrientation(ArrowOrientation.TOP)
setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED)

setIsVisibleArrow(true)
setArrowSize(10.dp)  // square
setArrowSize(width = 16.dp, height = 8.dp)  // base and protrusion
setArrowPosition(0.62f)  // 0f..1f along the edge
setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
setArrowColor(Color.White)

setWidth(200.dp)  // fixed
setWidthRatio(0.6f)  // fraction of the window
setMinWidth(120.dp)
setMaxWidth(320.dp)
setMinWidthRatio(0.3f)
setMaxWidthRatio(0.9f)
setHeight(120.dp)
setSize(width = 200.dp, height = 120.dp)

setPadding(12.dp)
setPadding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 4.dp)
setPaddingHorizontal(16.dp)
setPaddingVertical(8.dp)

setMargin(12.dp)
setMarginHorizontal(16.dp)
setElevation(2.dp)

setBackgroundColor(Color(0xFF785EF0))
setArrowColor(Color.White)  // Color.Unspecified inherits the background
setCornerRadius(12.dp)
setBorder(color = Color.White, thickness = 2.dp)
setAlpha(0.9f)

setIsVisibleOverlay(true)
setOverlayColor(Color(0x99000000))
setOverlayPadding(6.dp)
setOverlayShape(BalloonOverlayShape.RoundRect(radiusX = 12.dp, radiusY = 12.dp))
setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)
setDismissWhenOverlayClicked(true)

setBalloonAnimation(BalloonAnimation.ELASTIC)  // NONE, FADE, OVERSHOOT, ELASTIC, CIRCULAR
setCircularDuration(500L)

setBalloonHighlightAnimation(BalloonHighlightAnimation.HEARTBEAT, startDelayMillis = 300L)

balloonState.onBalloonClick = { /* the body was tapped */ }
balloonState.onOverlayClick = { /* the scrim was tapped */ }
balloonState.onDismiss = { /* the balloon closed */ }

setDismissWhenClicked(true)
setDismissWhenTouchOutside(true)
setDismissWhenBackPressed(true)
setDismissWhenShowAgain(true)
setAutoDismissDuration(2_000L)
setFocusable(true)

Balloon(
    state = balloonState,
    balloonContent = {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(imageVector = Icons.Default.Edit, contentDescription = null, tint = Color.White)
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = "Edit your profile", color = Color.White)
        }
    },
) {
    ProfileImage(onClick = { balloonState.showAlignBottom() })
}

Designed and developed by 2019 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

```kotlin
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("com.github.skydoves:balloon:2.0.1")
        }
    }
}
```

```kotlin
dependencies {
    implementation("com.github.skydoves:balloon:2.0.1")
}
```

val style = rememberBalloonBuilder {
    setArrowSize(10.dp)
    setArrowPosition(0.5f)
    setPadding(12.dp)
    setCornerRadius(8.dp)
    setBackgroundColor(Color(0xFF785EF0))
    setBalloonAnimation(BalloonAnimation.ELASTIC)
}

val style = Balloon.Builder().apply {
    setArrowSize(10.dp)
    setPadding(12.dp)
    setCornerRadius(8.dp)
    setBackgroundColor(Color(0xFF785EF0))
    setBalloonAnimation(BalloonAnimation.ELASTIC)
}.build()

val balloonState = rememberBalloonState(style)

Balloon(
    state = balloonState,
    balloonContent = {
        Text(text = "Now you can edit your profile!", color = Color.White)
    },
) {
    Button(onClick = { balloonState.showAlignTop() }) {
        Text(text = "Edit profile")
    }
}

Balloon(
    modifier = Modifier.weight(1f),
    state = balloonState,
    balloonContent = { Text(text = "Tooltip") },
) {
    Text(text = "Anchor")
}

BalloonHost {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Button(
            modifier = Modifier.balloon(balloonState) {
                Text(text = "Now you can edit your profile!", color = Color.White)
            },
            onClick = { balloonState.showAlignTop() },
        ) {
            Text(text = "Edit profile")
        }
    }
}

Always for `Modifier.balloon`, and for any balloon that turns on an overlay. The overlay
scrim is drawn by the host so it can cover the entire window including the system bars,
which a popup window cannot do.

balloonState.showAlignTop()
balloonState.dismiss()
balloonState.toggle()

Balloon(
    state = balloonState,
    balloonContent = {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(imageVector = Icons.Default.Edit, contentDescription = null, tint = Color.White)
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = "Edit your profile", color = Color.White)
        }
    },
) {
    ProfileImage(onClick = { balloonState.showAlignBottom() })
}

Version 2.0.0 replaces the View based implementation with a Compose Multiplatform one.
There is no `Context`, no `View`, and no XML in the API. If you are upgrading, start with
the [Migration guide](migration.md). The View based library is still available at `1.7.6`
and is documented under [Balloon 1.x (View)](legacy-view/getting-started.md).

Balloon is featured on the [Google Dev Library](https://devlibrary.withgoogle.com/products/android/repos/skydoves-Balloon), recognized for its quality and usefulness in the Android development community.

```kotlin
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("com.github.skydoves:balloon:2.0.1")
        }
    }
}
```

```kotlin
dependencies {
    implementation("com.github.skydoves:balloon:2.0.1")
}
```

val style = rememberBalloonBuilder {
    setArrowSize(10.dp)
    setPadding(12.dp)
    setCornerRadius(8.dp)
    setBackgroundColor(Color(0xFF785EF0))
    setBalloonAnimation(BalloonAnimation.ELASTIC)
}
val balloonState = rememberBalloonState(style)

Balloon(
    state = balloonState,
    balloonContent = { Text(text = "Now you can edit your profile!", color = Color.White) },
) {
    Button(onClick = { balloonState.showAlignTop() }) {
        Text(text = "Edit profile")
    }
}

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

```groovy
dependencies {
    implementation("com.github.skydoves:balloon:1.7.6")
}
```

```kotlin
dependencies {
    implementation("com.github.skydoves:balloon:1.7.6")
}
```

val balloon = Balloon.Builder(context)
    .setWidthRatio(1.0f)
    .setHeight(BalloonSizeSpec.WRAP)
    .setText("Edit your profile here!")
    .setTextColorResource(R.color.white)
    .setTextSize(15f)
    .setIconDrawableResource(R.drawable.ic_edit)
    .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    .setArrowSize(10)
    .setArrowPosition(0.5f)
    .setPadding(12)
    .setCornerRadius(8f)
    .setBackgroundColorResource(R.color.skyBlue)
    .setBalloonAnimation(BalloonAnimation.ELASTIC)
    .setLifecycleOwner(lifecycleOwner)
    .build()

val balloon = createBalloon(context) {
    setWidthRatio(1.0f)
    setHeight(BalloonSizeSpec.WRAP)
    setText("Edit your profile here!")
    setTextColorResource(R.color.white)
    setTextSize(15f)
    setIconDrawableResource(R.drawable.ic_edit)
    setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    setArrowSize(10)
    setArrowPosition(0.5f)
    setPadding(12)
    setCornerRadius(8f)
    setBackgroundColorResource(R.color.skyBlue)
    setBalloonAnimation(BalloonAnimation.ELASTIC)
    setLifecycleOwner(lifecycleOwner)
}

Balloon balloon = new Balloon.Builder(context)
    .setArrowSize(10)
    .setArrowOrientation(ArrowOrientation.TOP)
    .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    .setArrowPosition(0.5f)
    .setWidth(BalloonSizeSpec.WRAP)
    .setHeight(65)
    .setTextSize(15f)
    .setCornerRadius(4f)
    .setAlpha(0.9f)
    .setText("You can access your profile from now on.")
    .setTextColor(ContextCompat.getColor(context, R.color.white))
    .setIconDrawable(ContextCompat.getDrawable(context, R.drawable.ic_profile))
    .setBackgroundColor(ContextCompat.getColor(context, R.color.colorPrimary))
    .setOnBalloonClickListener(onBalloonClickListener)
    .setBalloonAnimation(BalloonAnimation.FADE)
    .setLifecycleOwner(lifecycleOwner)
    .build();

Balloon.Builder(context)
    .setWidth(220)  // sets 220dp width
    .setHeight(160)  // sets 160dp height

Balloon.Builder(context)
    .setWidth(BalloonSizeSpec.WRAP)  // width depends on content
    .setHeight(BalloonSizeSpec.WRAP)  // height depends on content

Balloon.Builder(context)
    .setWidthRatio(0.5f)  // 50% of the horizontal screen size

Balloon.Builder(context)
    .setPadding(6)  // 6dp padding on all sides
    .setPaddingLeft(8)  // 8dp left padding
    .setPaddingTop(12)  // 12dp top padding
    .setPaddingRight(8)
    .setPaddingBottom(12)

Balloon.Builder(context)
    .setMargin(12)  // margin on all sides
    .setMarginLeft(14)
    .setMarginRight(14)
    .setMarginHorizontal(14)  // left and right margins

Balloon.Builder(context)
    .setLifecycleOwner(lifecycleOwner)

Always set the lifecycle owner to prevent memory leaks. Dialog and PopupWindow can leak memory if not properly dismissed before the activity is destroyed.

class CustomActivity : AppCompatActivity() {
    private val profileBalloon by balloon<ProfileBalloonFactory>()
}

class ProfileBalloonFactory : Balloon.Factory() {

    override fun create(context: Context, lifecycle: LifecycleOwner): Balloon {
        return createBalloon(context) {
            setLayout(R.layout.layout_custom_profile)
            setArrowSize(10)
            setArrowOrientation(ArrowOrientation.TOP)
            setArrowPosition(0.5f)
            setWidthRatio(0.55f)
            setHeight(250)
            setCornerRadius(4f)
            setBackgroundColorResource(R.color.background)
            setBalloonAnimation(BalloonAnimation.CIRCULAR)
            setLifecycleOwner(lifecycle)
        }
    }
}

The factory class must have a default (no-argument) constructor.

Balloon `1.7.6` is the **last release of the View based library**. It still works and stays
published on Maven Central, but it receives no further releases.

New projects should use [Balloon 2.0.0](../index.md), which is built on Compose
Multiplatform. If you are upgrading, read the [Migration guide](../migration.md).

dependencies {
    implementation("com.github.skydoves:balloon:1.7.6")
    implementation("com.github.skydoves:balloon-compose:1.7.6")
}

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../../index.md) and the
[Migration guide](../../migration.md).

dependencies {
    implementation("com.github.skydoves:balloon-compose:1.7.6")
}

@Composable
fun MyScreen() {
    val builder = rememberBalloonBuilder {
        setText("Edit your profile here!")
        setArrowSize(10)
        setArrowPosition(0.5f)
        setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        setBackgroundColorResource(R.color.skyBlue)
        setBalloonAnimation(BalloonAnimation.ELASTIC)
    }
    val balloonState = rememberBalloonState(builder)

    Button(
        onClick = { balloonState.showAlignTop() },
        modifier = Modifier.balloon(balloonState) {
            Text("Tooltip content")
        }
    ) {
        Text("Show Balloon")
    }
}

Modifier.balloon(balloonState) {
    // Any composable content
    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            imageVector = Icons.Default.Info,
            contentDescription = null,
            tint = Color.White
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text(
            text = "Welcome to the app!",
            color = Color.White
        )
    }
}

// Show aligned to different positions
balloonState.showAlignTop()
balloonState.showAlignBottom()
balloonState.showAlignStart()
balloonState.showAlignEnd()

// Show at center
balloonState.showAtCenter()

// Show as dropdown
balloonState.showAsDropDown()

// Dismiss immediately
balloonState.dismiss()

// Dismiss with delay
balloonState.dismissWithDelay(1000L)

val builder = rememberBalloonBuilder {
    setBackgroundColor(Color(0xFF4A90E2))
    setTextColor(Color.White)
    setArrowColor(Color(0xFF4A90E2))
    setOverlayColor(Color.Black.copy(alpha = 0.5f))
}

@Composable
fun ProfileScreen() {
    val builder = rememberBalloonBuilder {
        setArrowSize(10)
        setArrowPosition(0.5f)
        setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setPadding(12)
        setMarginHorizontal(12)
        setCornerRadius(8f)
        setBackgroundColor(Color(0xFF333333))
        setBalloonAnimation(BalloonAnimation.FADE)
    }
    val balloonState = rememberBalloonState(builder)

    IconButton(
        onClick = { balloonState.showAlignBottom() },
        modifier = Modifier.balloon(balloonState) {
            Text(
                text = "Click to edit your profile",
                color = Color.White,
                modifier = Modifier.padding(8.dp)
            )
        }
    ) {
        Icon(
            imageVector = Icons.Default.Edit,
            contentDescription = "Edit"
        )
    }
}

setBalloonAnimation(BalloonAnimation.ELASTIC)

setCircularDuration(700L)  // only affects CIRCULAR

`setBalloonAnimation(BalloonAnimation.CIRCULAR)` also sets `focusable` to `false`, which is
what 1.x did so the reveal can play without the popup stealing input. Call
`setFocusable(true)` afterwards if you want it back.

setBalloonHighlightAnimation(BalloonHighlightAnimation.HEARTBEAT)
setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE, startDelayMillis = 300L)

setBalloonHighlightAnimation(BalloonHighlightAnimation.ROTATE)
setBalloonRotationAnimation(
    BalloonRotateAnimation(
        direction = BalloonRotateDirection.RIGHT,
        turns = 1,
        loops = BalloonRotateAnimation.INFINITE,
        speedMillis = 2500,
        degreeX = 0,
        degreeZ = 0,
    ),
)

setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)  // default
setBalloonOverlayAnimation(BalloonOverlayAnimation.NONE)

val style = DefaultBalloonStyle.derive { setBalloonAnimation(BalloonAnimation.NONE) }

mainClock.autoAdvance = false
runOnUiThread { balloonState.showAlignBottom() }
mainClock.advanceTimeBy(16L)
onNodeWithTag("body").assertIsDisplayed()

setIsVisibleArrow(true)
setArrowSize(10.dp)  // square
setArrowSize(width = 16.dp, height = 8.dp)  // base along the edge, protrusion outward
setArrowWidth(16.dp)
setArrowHeight(8.dp)

`setIsVisibleArrow(false)` also releases the space the arrow occupied, so the body sits
flush against the anchor. Balloon 1.x kept reserving it, which left a gap the size of an
arrow nobody could see.

setArrowOrientation(ArrowOrientation.TOP)
setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED)

setArrowPosition(0.62f)  // 0f..1f
setArrowPositionRules(ArrowPositionRules.ALIGN_BALLOON)  // default

setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
setArrowPosition(0.5f)  // always points at the middle of the anchor

arrowSize * arrowAlignAnchorPaddingRatio + arrowAlignAnchorPadding

setArrowAlignAnchorPaddingRatio(2.5f)  // default
setArrowAlignAnchorPadding(8.dp)  // default 0.dp

setArrowColor(Color.White)

setBackgroundColor(Color(0xFF785EF0))
setArrowColor(Color.White)  // Color.Unspecified inherits the background
setAlpha(0.9f)

setBorder(color = Color.White, thickness = 2.dp)
setBalloonStroke(color = Color.White, thickness = 2.dp)  // same thing, 1.x name

Balloon(
    state = balloonState,
    balloonContent = {
        Column {
            Text(
                text = "Choose a drink",
                color = Color.White,
                style = MaterialTheme.typography.titleSmall,
            )
            Spacer(modifier = Modifier.height(8.dp))
            drinks.forEach { drink ->
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable { onDrinkSelected(drink) }
                        .padding(vertical = 6.dp),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Icon(painter = painterResource(drink.icon), contentDescription = null)
                    Spacer(modifier = Modifier.width(8.dp))
                    Text(text = drink.name, color = Color.White)
                }
            }
        }
    },
) {
    Button(onClick = { balloonState.showAlignBottom() }) { Text(text = "Drinks") }
}

val base = rememberBalloonBuilder {
    setCornerRadius(8.dp)
    setPadding(12.dp)
    setBackgroundColor(Color(0xFF785EF0))
}

val warning = base.derive { setBackgroundColor(Color(0xFFFF6F00)) }
val subtle = base.derive {
    setAlpha(0.85f)
    setArrowSize(8.dp)
}

val color by animateColorAsState(if (selected) Color(0xFF785EF0) else Color(0xFF444444))
val balloonState = rememberBalloonState(style.derive { setBackgroundColor(color) })

setDismissWhenClicked(true)  // tapping the body closes it
setDismissWhenTouchOutside(true)  // tapping outside closes it
setDismissWhenBackPressed(true)  // back or Escape closes it
setDismissWhenShowAgain(true)  // showing a visible balloon closes it instead
setDismissWhenTouchMargin(true)  // a tap in the margin band closes it too
setDismissWhenOverlayClicked(true)  // tapping the scrim closes it
setAutoDismissDuration(2_000L)  // 0L disables
setFocusable(true)

balloonContent = {
    Text(
        modifier = Modifier.semantics { liveRegion = LiveRegionMode.Polite },
        text = "Now you can edit your profile!",
    )
}

val balloonState = rememberBalloonState(style)

balloonState.onBalloonClick = { /* the body was tapped */ }
balloonState.onOverlayClick = { /* the scrim was tapped */ }
balloonState.onDismiss = { /* the balloon closed */ }

val style = rememberBalloonBuilder {
    setDismissWhenClicked(true)
}
balloonState.onBalloonClick = {
    analytics.log("tooltip_tapped")
}

balloonState.onOverlayClick = {
    analytics.log("tour_scrim_tapped")
}

balloonState.onDismiss = {
    preferences.markTooltipSeen()
}

val rotation by animateFloatAsState(if (balloonState.isVisible) 180f else 0f)

Icon(
    modifier = Modifier.rotate(rotation),
    imageVector = Icons.Default.ExpandMore,
    contentDescription = null,
)

LaunchedEffect(Unit) {
    balloonState.awaitAlignBottom()
    preferences.markTooltipSeen()
}

// keep the View based library
implementation("com.github.skydoves:balloon:1.7.6")
implementation("com.github.skydoves:balloon-compose:1.7.6")

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("com.github.skydoves:balloon:2.0.1")
        }
    }
}

dependencies {
    implementation("com.github.skydoves:balloon:2.0.1")
}

val balloon = Balloon.Builder(context)
    .setWidthRatio(0.7f)
    .setHeight(BalloonSizeSpec.WRAP)
    .setText("Now you can edit your profile!")
    .setTextColorResource(R.color.white)
    .setTextSize(15f)
    .setIconDrawableResource(R.drawable.ic_edit)
    .setArrowSize(10)
    .setArrowPosition(0.5f)
    .setPadding(12)
    .setCornerRadius(8f)
    .setBackgroundColorResource(R.color.purple)
    .setBalloonAnimation(BalloonAnimation.ELASTIC)
    .setLifecycleOwner(lifecycleOwner)
    .build()

balloon.showAlignTop(anchorView)

val style = rememberBalloonBuilder {
    setWidthRatio(0.7f)
    setArrowSize(10.dp)
    setArrowPosition(0.5f)
    setPadding(12.dp)
    setCornerRadius(8.dp)
    setBackgroundColor(Color(0xFF785EF0))
    setBalloonAnimation(BalloonAnimation.ELASTIC)
}
val balloonState = rememberBalloonState(style)

Balloon(
    state = balloonState,
    balloonContent = {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(imageVector = Icons.Default.Edit, contentDescription = null, tint = Color.White)
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = "Now you can edit your profile!", color = Color.White, fontSize = 15.sp)
        }
    },
) {
    Button(onClick = { balloonState.showAlignTop() }) { Text(text = "Edit profile") }
}

import com.skydoves.balloon.compose.rememberBalloonBuilder
import com.skydoves.balloon.compose.rememberBalloonState
import com.skydoves.balloon.compose.balloon

val builder = rememberBalloonBuilder {
    setArrowSize(10)
    setPadding(12)
    setCornerRadius(8f)
    setBackgroundColorResource(R.color.purple)
}
val balloonState = rememberBalloonState(builder)

Button(
    modifier = Modifier.balloon(balloonState) { Text("Tooltip") },
    onClick = { balloonState.showAlignTop() },
) { Text("Anchor") }

import com.skydoves.balloon.BalloonHost
import com.skydoves.balloon.rememberBalloonBuilder
import com.skydoves.balloon.rememberBalloonState
import com.skydoves.balloon.balloon

val style = rememberBalloonBuilder {
    setArrowSize(10.dp)
    setPadding(12.dp)
    setCornerRadius(8.dp)
    setBackgroundColor(Color(0xFF785EF0))
}
val balloonState = rememberBalloonState(style)

BalloonHost {
    Button(
        modifier = Modifier.balloon(balloonState) { Text("Tooltip") },
        onClick = { balloonState.showAlignTop() },
    ) { Text("Anchor") }
}

balloonContent = {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(imageVector = Icons.Default.Edit, contentDescription = null, tint = Color.White)
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Edit your profile", color = Color.White, fontSize = 15.sp)
    }
}

balloonContent = { Text(text = "Tooltip", color = Color.White) }

implementation("com.github.skydoves:balloon:1.7.6")
implementation("com.github.skydoves:balloon-compose:1.7.6")

val style = rememberBalloonBuilder {
    setIsVisibleOverlay(true)
    setOverlayColor(Color(0x99000000))
    setOverlayPadding(6.dp)
    setOverlayShape(BalloonOverlayShape.Oval)
}

The scrim is drawn by `BalloonHost`, not by a popup. A Compose `Popup` cannot do the job
on Android: its layout params are wrap content and the composition root clamps the
reported size to a measure spec that excludes the navigation bar, so a popup scrim would
stop short of the bottom of the screen.

```kotlin
BalloonHost(modifier = Modifier.fillMaxSize()) {
    // Balloon(...) and Modifier.balloon(...) anchors go here
}
```

A balloon with `setIsVisibleOverlay(true)` outside a host throws an
`IllegalStateException` that says exactly this.

The scrim fills the host's `Box` and is composited offscreen so the cut-out can erase
from it, which means it cannot paint outside those bounds. Balloon 1.x always dimmed the
whole display, because its scrim had a `MATCH_PARENT` window of its own.

To get the same result, put `BalloonHost` at the root of an edge-to-edge window with
`Modifier.fillMaxSize()`. Wrapping only a subtree dims only that subtree, which is
sometimes what you want and is worth knowing either way.

setOverlayShape(BalloonOverlayShape.Empty)  // no cut-out, dim everything
setOverlayShape(BalloonOverlayShape.Rect)  // the anchor's bounds
setOverlayShape(BalloonOverlayShape.Oval)  // inscribed in the bounds, default
setOverlayShape(BalloonOverlayShape.Circle(radius = 40.dp))
setOverlayShape(BalloonOverlayShape.RoundRect(radiusX = 12.dp, radiusY = 12.dp))
setOverlayShape(
    BalloonOverlayShape.RoundRectPerCorner(
        topStart = 16.dp,
        topEnd = 4.dp,
        bottomEnd = 16.dp,
        bottomStart = 4.dp,
    ),
)

`Circle` and `RoundRect` took raw pixels in 1.x and take `Dp` here. Passing the same
number gives a different result, so convert deliberately when porting.

setOverlayPadding(6.dp)
setOverlayPadding(start = 4.dp, top = 10.dp, end = 20.dp, bottom = 30.dp)

setOverlayPadding(6.dp)
setOverlayPaddingColor(Color(0xFFFFC107))

setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)  // default, 200ms linear
setBalloonOverlayAnimation(BalloonOverlayAnimation.NONE)

setDismissWhenOverlayClicked(true)  // default
balloonState.onOverlayClick = { analytics.log("tour_scrim_tapped") }

BalloonHost {
    val tourStyle = rememberBalloonBuilder {
        setIsVisibleOverlay(true)
        setOverlayColor(Color(0xCC000000))
        setOverlayPadding(8.dp)
        setOverlayShape(BalloonOverlayShape.RoundRect(12.dp))
        setBackgroundColor(Color.White)
        setPadding(12.dp)
        setCornerRadius(8.dp)
    }
    val step1 = rememberBalloonState(tourStyle)
    val step2 = rememberBalloonState(tourStyle)

    LaunchedEffect(Unit) {
        step1.awaitAlignBottom()
        step2.awaitAlignTop()
    }

    Column {
        Button(modifier = Modifier.balloon(step1) { Text("Start here") }, onClick = {}) {
            Text("Home")
        }
        Button(modifier = Modifier.balloon(step2) { Text("Then here") }, onClick = {}) {
            Text("Profile")
        }
    }
}

balloonState.showAlignTop()
balloonState.showAlignBottom()
balloonState.showAlignStart()
balloonState.showAlignEnd()
balloonState.showAsDropDown()
balloonState.showAtCenter(BalloonCenterAlign.TOP)
balloonState.show(BalloonAlign.BOTTOM)

balloonState.showAlignBottom(xOffset = 8.dp, yOffset = 4.dp)
balloonState.show(BalloonAlign.TOP, xOffset = (-12).dp, yOffset = (-4).dp)

balloonState.dismiss()
balloonState.toggle()
balloonState.dismissWithDelay(scope, delayMillis = 1_500L)

setAutoDismissDuration(2_000L)  // 0L disables it
setDismissWhenTouchOutside(true)
setDismissWhenBackPressed(true)
setDismissWhenClicked(true)
setDismissWhenShowAgain(true)  // showing an already visible balloon closes it
setDismissWhenTouchMargin(true)  // a tap in the margin band closes it too

balloonState.update(BalloonAlign.TOP, xOffset = 4.dp)

val rotation by animateFloatAsState(if (balloonState.isVisible) 180f else 0f)
Icon(modifier = Modifier.rotate(rotation), imageVector = Icons.Default.ExpandMore, contentDescription = null)

LaunchedEffect(Unit) {
    profileBalloon.awaitAlignBottom()
    searchBalloon.awaitAlignTop()
    settingsBalloon.awaitAtCenter(BalloonCenterAlign.END)
}

LaunchedEffect(Unit) {
    balloonState.showAlignBottom()
}

balloonState.onBalloonClick = { /* the body was tapped */ }
balloonState.onOverlayClick = { /* the scrim was tapped */ }
balloonState.onDismiss = { /* the balloon closed */ }

popup = margin + reserve + card(padding + your content)

setWidth(200.dp)  // fixed
setWidthRatio(0.6f)  // fraction of the window width
setMinWidth(120.dp)
setMaxWidth(320.dp)
setMinWidthRatio(0.3f)
setMaxWidthRatio(0.9f)

setHeight(120.dp)
setSize(width = 200.dp, height = 120.dp)

setPadding(12.dp)
setPadding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 4.dp)
setPaddingHorizontal(16.dp)
setPaddingVertical(8.dp)
setPaddingStart(8.dp)
setPaddingTop(4.dp)
setPaddingEnd(8.dp)
setPaddingBottom(4.dp)

setMargin(12.dp)
setMargin(start = 8.dp, top = 0.dp, end = 8.dp, bottom = 0.dp)
setMarginHorizontal(16.dp)
setMarginVertical(8.dp)
setMarginStart(8.dp)
setMarginTop(4.dp)
setMarginEnd(8.dp)
setMarginBottom(4.dp)

setElevation(2.dp)  // default

setCornerRadius(12.dp)

Copyright 2019 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

Balloon.Builder(context)
    .setBalloonAnimation(BalloonAnimation.ELASTIC)

BalloonAnimation.NONE  // no animation
BalloonAnimation.FADE  // fade in/out
BalloonAnimation.OVERSHOOT  // overshoot effect
BalloonAnimation.ELASTIC  // elastic bounce
BalloonAnimation.CIRCULAR  // circular reveal

Balloon.Builder(context)
    .setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)

BalloonHighlightAnimation.NONE  // no highlight animation
BalloonHighlightAnimation.HEARTBEAT  // pulsing effect
BalloonHighlightAnimation.SHAKE  // shaking effect
BalloonHighlightAnimation.BREATH  // breathing effect
BalloonHighlightAnimation.ROTATE  // rotation effect

Balloon.Builder(context)
    .setBalloonHighlightAnimation(BalloonHighlightAnimation.ROTATE)
    .setBalloonRotationAnimation(
        BalloonRotateAnimation.Builder()
            .setLoops(2)
            .setSpeeds(2500)
            .setTurns(INFINITE)
            .build()
    )

Balloon.Builder(context)
    .setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)

BalloonOverlayAnimation.NONE  // no overlay animation
BalloonOverlayAnimation.FADE  // fade in/out (default)

Balloon.Builder(context)
    .setCircularDuration(500L)  // duration in milliseconds

Balloon.Builder(context)
    .setBalloonAnimationStyle(R.style.CustomBalloonAnimation)

<style name="CustomBalloonAnimation" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/custom_enter</item>
    <item name="android:windowExitAnimation">@anim/custom_exit</item>
</style>

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

Balloon.Builder(context)
    .setIsVisibleArrow(true)  // show or hide the arrow
    .setArrowSize(10)  // arrow size in dp
    .setArrowPosition(0.5f)  // position ratio (0.0 ~ 1.0)
    .setArrowOrientation(ArrowOrientation.BOTTOM)  // arrow direction
    .setArrowDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))  // custom drawable

ArrowOrientation.TOP  // arrow points upward
ArrowOrientation.BOTTOM  // arrow points downward
ArrowOrientation.START  // arrow points to the start (left in LTR)
ArrowOrientation.END  // arrow points to the end (right in LTR)

Balloon.Builder(context)
    .setArrowPosition(0.5f)  // center
    .setArrowPosition(0.2f)  // 20% from the start
    .setArrowPosition(0.8f)  // 80% from the start

Balloon.Builder(context)
    .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    .setArrowPosition(0.5f)  // arrow will be at the center of the anchor

Balloon.Builder(context)
    .setArrowPositionRules(ArrowPositionRules.ALIGN_BALLOON)  // default
    .setArrowPosition(0.5f)  // arrow will be at the center of the Balloon

Balloon.Builder(context)
    .setArrowOrientationRules(ArrowOrientationRules.ALIGN_ANCHOR)  // default

Balloon.Builder(context)
    .setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED)

Balloon.Builder(context)
    .setArrowSize(10)  // 10dp

Balloon.Builder(context)
    .setArrowSize(BalloonSizeSpec.WRAP)

Balloon.Builder(context)
    .setArrowDrawableResource(R.drawable.custom_arrow)
    .setArrowColorResource(R.color.custom_arrow_color)

Balloon.Builder(context)
    .setArrowLeftPadding(10)  // minimum distance from left edge
    .setArrowRightPadding(10)  // minimum distance from right edge

Balloon.Builder(context)
    .setArrowElevation(4f)

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

Balloon.Builder(context)
    .setBackgroundColor(Color.BLACK)
    .setBackgroundColorResource(R.color.skyBlue)

Balloon.Builder(context)
    .setCornerRadius(8f)

Balloon.Builder(context)
    .setAlpha(0.9f)  // 0.0 to 1.0

Balloon.Builder(context)
    .setBalloonStroke(
        color = Color.WHITE,
        thickness = 4f
    )

Balloon.Builder(context)
    .setElevation(6f)

Balloon.Builder(context)
    .setFocusable(true)  // gains focus when shown

Balloon.Builder(context)
    .setDismissWhenClicked(true)  // dismiss when Balloon is clicked

Balloon.Builder(context)
    .setDismissWhenTouchOutside(true)  // dismiss when touching outside

Balloon.Builder(context)
    .setDismissWhenShowAgain(true)  // dismiss current if show is called again

Balloon.Builder(context)
    .setDismissWhenLifecycleOnPause(true)  // dismiss on onPause

Balloon.Builder(context)
    .setPassTouchEventToAnchor(true)

Balloon.Builder(context)
    .setIsRtlLayout(true)

Balloon.Builder(context)
    .setIsStatusBarVisible(true)

Balloon.Builder(context)
    .setPreferenceName("my_balloon")

val width = balloon.getMeasuredWidth()
val height = balloon.getMeasuredHeight()

val contentView: ViewGroup = balloon.getContentView()
val arrowView: View = balloon.getBalloonArrowView()

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

Balloon.Builder(context)
    .setOnBalloonClickListener { view ->
        // handle balloon click
    }

Balloon.Builder(context)
    .setOnBalloonOverlayClickListener {
        // handle overlay click
    }

Balloon.Builder(context)
    .setOnBalloonDismissListener {
        // handle balloon dismiss
    }

Balloon.Builder(context)
    .setOnBalloonInitializedListener { view ->
        // balloon is ready
    }

Balloon.Builder(context)
    .setOnBalloonTouchListener { view, motionEvent ->
        // handle touch event
        true  // return true if consumed
    }

Balloon.Builder(context)
    .setOnBalloonOutsideTouchListener { view, motionEvent ->
        // handle outside touch
    }

Balloon.Builder(context)
    .setOnBalloonOverlayTouchListener { view, motionEvent ->
        // handle overlay touch
        true  // return true if consumed
    }

val balloon = Balloon.Builder(context)
    .setText("Hello World!")
    .build()

balloon.setOnBalloonClickListener { view ->
    // handle click
}

balloon.setOnBalloonDismissListener {
    // handle dismiss
}

balloon.setOnBalloonClickListener(object : OnBalloonClickListener {
    override fun onBalloonClick(view: View) {
        // handle click
    }
})

balloon.setOnBalloonDismissListener(object : OnBalloonDismissListener {
    override fun onBalloonDismiss() {
        // handle dismiss
    }
})

val firstBalloon = Balloon.Builder(context)
    .setText("First tooltip")
    .setOnBalloonDismissListener {
        secondBalloon.showAlignBottom(anchor)
    }
    .build()

val secondBalloon = Balloon.Builder(context)
    .setText("Second tooltip")
    .build()

firstBalloon.showAlignBottom(anchor)

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

Balloon.Builder(context)
    .setIsVisibleOverlay(true)
    .setOverlayColorResource(R.color.overlay)
    .setOverlayPadding(6f)
    .setOverlayPaddingColorResource(R.color.colorPrimary)
    .setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)
    .setDismissWhenOverlayClicked(false)

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayOval)

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayCircle(radius = 36f))

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayRect)

Balloon.Builder(context)
    .setOverlayShape(BalloonOverlayRoundRect(12f, 12f))

Balloon.Builder(context)
    .setOverlayShape(
        BalloonOverlayRoundRect(
            topLeftRadius = 8f,
            topRightRadius = 8f,
            bottomLeftRadius = 16f,
            bottomRightRadius = 16f
        )
    )

Balloon.Builder(context)
    .setOverlayPosition(Point(x, y))

BalloonOverlayAnimation.NONE
BalloonOverlayAnimation.FADE  // default

Balloon.Builder(context)
    .setOverlayPadding(8f)  // padding in dp
    .setOverlayPaddingColorResource(R.color.paddingColor)  // padding color

Balloon.Builder(context)
    .setDismissWhenOverlayClicked(true)  // dismiss balloon when overlay is clicked

Balloon.Builder(context)
    .setOnBalloonOverlayClickListener {
        // handle overlay click
    }

Balloon.Builder(context)
    .setOnBalloonOverlayTouchListener { view, event ->
        // handle overlay touch
        true  // return true if handled
    }

balloon.showAlign(
    align = BalloonAlign.TOP,
    mainAnchor = mainView,
    subAnchorList = listOf(secondaryView1, secondaryView2),
    xOff = 0,
    yOff = 0
)

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

Balloon.Builder(context)
    .setPreferenceName("my_tooltip")
    .setShowCounts(3)  // show only 3 times

if (balloon.shouldShowUp()) {
    balloon.showAlignBottom(anchor)
}

balloon.clearAllPreferences()

Balloon.Builder(context)
    .setPreferenceName("unique_tooltip_name")
    .setShowCounts(1)  // show only once

val persistence = BalloonPersistence.getInstance(context)

// Check if should show
val shouldShow = persistence.shouldShowUp("tooltip_name", 3)

// Manually increment count
persistence.putIncrementedCounts("tooltip_name")

// Clear all preferences
persistence.clearAllPreferences()

val onboardingBalloon = Balloon.Builder(context)
    .setText("This is a new feature!")
    .setPreferenceName("feature_onboarding")
    .setShowCounts(1)
    .build()

// This will only show the first time
onboardingBalloon.showAlignBottom(anchor)

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

balloon.showAlignTop(anchor)  // shows above the anchor
balloon.showAlignTop(anchor, xOff, yOff)  // with offset

balloon.showAlignBottom(anchor)  // shows below the anchor
balloon.showAlignBottom(anchor, xOff, yOff)  // with offset

balloon.showAlignStart(anchor)  // shows at start
balloon.showAlignStart(anchor, xOff, yOff)  // with offset

balloon.showAlignEnd(anchor)  // shows at end
balloon.showAlignEnd(anchor, xOff, yOff)  // with offset

balloon.showAsDropDown(anchor)  // shows as dropdown
balloon.showAsDropDown(anchor, xOff, yOff)  // with offset

balloon.showAtCenter(anchor)  // shows at center
balloon.showAtCenter(anchor, xOff, yOff, BalloonCenterAlign.TOP)

myButton.showAlignTop(balloon)
myButton.showAlignBottom(balloon)
myButton.showAlignStart(balloon)
myButton.showAlignEnd(balloon)

balloon.dismiss()

balloon.dismissWithDelay(1000L)  // dismisses after 1 second

Balloon.Builder(context)
    .setAutoDismissDuration(1000L)  // auto dismiss after 1 second

customListBalloon
    .relayShowAlignBottom(customProfileBalloon, circleImageView)
    .relayShowAlignTop(customTagBalloon, bottomNavigationView, 130, 0)

// Start the sequence
customListBalloon.showAlignBottom(anchorView)

coroutineScope.launch {
    customListBalloon.awaitAlignBottom(anchorView)
    customProfileBalloon.awaitAlignBottom(circleImageView)
    customTagBalloon.awaitAlignTop(bottomNavigationView, 130, 0)
}

The `relayShow__` and `await__` methods overwrite the `setOnDismissListener` internally, so you cannot use `setOnDismissListener` at the same time.

balloon.updateAlignTop(xOff, yOff)
balloon.updateAlignBottom(xOff, yOff)
balloon.updateAlignStart(xOff, yOff)
balloon.updateAlignEnd(xOff, yOff)
balloon.update(xOff, yOff)

balloon.setIsAttachedInDecor(true)

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../index.md) and the
[Migration guide](../migration.md).

Balloon.Builder(context)
    .setText("Edit your profile here!")
    .setTextSize(15f)
    .setTextColorResource(R.color.white)
    .setTextGravity(Gravity.START)
    .setTextTypeface(Typeface.BOLD)

Balloon.Builder(context)
    .setText("<b>Bold</b> and <i>italic</i> text")
    .setTextIsHtml(true)

Balloon.Builder(context)
    .setTextSize(15f)
    .setMinAutoSizeTextSize(14f)
    .setMaxAutoSizeTextSize(18f)
    .setEnableAutoSized(true)

Ensure the maximum auto text size is higher than the minimum auto text size.

```kotlin
val textForm = TextForm.Builder(context)
    .setText("Edit your profile here!")
    .setTextColorResource(R.color.white)
    .setTextSize(14f)
    .setTextTypeface(Typeface.BOLD)
    .build()
```

```kotlin
val textForm = textForm(context) {
    setText("Edit your profile here!")
    setTextColorResource(R.color.white)
    setTextSize(14f)
    setTextTypeface(Typeface.BOLD)
}
```

```java
TextForm textForm = new TextForm.Builder(context)
    .setText("Edit your profile here!")
    .setTextColorResource(R.color.white)
    .setTextSize(14f)
    .setTextTypeface(Typeface.BOLD)
    .build();
```

Balloon.Builder(context)
    .setTextForm(textForm)

Balloon.Builder(context)
    .setIconDrawableResource(R.drawable.ic_edit)
    .setIconSize(20)  // icon size in dp
    .setIconSpace(10)  // margin between icon and text
    .setIconColorResource(R.color.white)
    .setIconGravity(IconGravity.START)  // START, END, TOP, BOTTOM

IconGravity.START  // icon on the left (LTR)
IconGravity.END  // icon on the right (LTR)
IconGravity.TOP  // icon above text
IconGravity.BOTTOM  // icon below text

```kotlin
val iconForm = IconForm.Builder(context)
    .setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))
    .setIconColor(ContextCompat.getColor(context, R.color.skyblue))
    .setIconSize(20)
    .setIconSpace(12)
    .build()
```

```kotlin
val iconForm = iconForm(context) {
    setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))
    setIconColor(ContextCompat.getColor(context, R.color.skyblue))
    setIconSize(20)
    setIconSpace(12)
}
```

```java
IconForm iconForm = new IconForm.Builder(context)
    .setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))
    .setIconColor(ContextCompat.getColor(context, R.color.skyblue))
    .setIconSize(20)
    .setIconSpace(12)
    .build();
```

Balloon.Builder(context)
    .setIconForm(iconForm)

val balloon = Balloon.Builder(context)
    .setLayout(R.layout.layout_custom_balloon)
    .setArrowSize(10)
    .setArrowOrientation(ArrowOrientation.TOP)
    .setArrowPosition(0.5f)
    .setWidthRatio(0.55f)
    .setHeight(250)
    .setCornerRadius(4f)
    .setBackgroundColorResource(R.color.black)
    .setBalloonAnimation(BalloonAnimation.CIRCULAR)
    .setLifecycleOwner(lifecycleOwner)
    .build()

val button: Button = balloon.getContentView().findViewById(R.id.button_edit)
button.setOnClickListener {
    Toast.makeText(context, "Edit clicked", Toast.LENGTH_SHORT).show()
    balloon.dismiss()
}

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../../index.md) and the
[Migration guide](../../migration.md).

@Composable
fun MyScreen() {
    val builder = rememberBalloonBuilder {
        setText("Hello World!")
    }
    val balloonState = rememberBalloonState(builder)
}

val balloonState = rememberBalloonState(
    builder = builder,
    key = someKey  // recomposes when key changes
)

if (balloonState.isShowing) {
    // balloon is visible
}

if (balloonState.isAttached) {
    // safe to call show methods
}

val balloon = balloonState.balloon

val anchor = balloonState.anchorView

// Show above the anchor
balloonState.showAlignTop()
balloonState.showAlignTop(xOff = 10, yOff = -5)

// Show below the anchor
balloonState.showAlignBottom()
balloonState.showAlignBottom(xOff = 0, yOff = 10)

// Show to the start (left in LTR)
balloonState.showAlignStart()
balloonState.showAlignStart(xOff = -10, yOff = 0)

// Show to the end (right in LTR)
balloonState.showAlignEnd()
balloonState.showAlignEnd(xOff = 10, yOff = 0)

balloonState.showAtCenter()
balloonState.showAtCenter(
    xOff = 0,
    yOff = 0,
    centerAlign = BalloonCenterAlign.TOP
)

balloonState.showAsDropDown()
balloonState.showAsDropDown(xOff = 0, yOff = 10)

LaunchedEffect(Unit) {
    balloonState.awaitAlignTop()
    // continues after balloon is dismissed

    balloonState.awaitAlignBottom()
    // continues after balloon is dismissed
}

// Dismiss immediately
balloonState.dismiss()

// Dismiss with delay (returns true if scheduled)
val scheduled = balloonState.dismissWithDelay(1000L)

balloonState.updateAlignTop(xOff = 0, yOff = -10)
balloonState.updateAlignBottom(xOff = 0, yOff = 10)
balloonState.updateAlignStart(xOff = -10, yOff = 0)
balloonState.updateAlignEnd(xOff = 10, yOff = 0)
balloonState.update(xOff = 0, yOff = 0)

balloonState.setOnBalloonClickListener { view ->
    // handle click
}

balloonState.setOnBalloonDismissListener {
    // handle dismiss
}

balloonState.setOnBalloonOutsideTouchListener { view, event ->
    // handle outside touch
}

balloonState.setOnBalloonOverlayClickListener {
    // handle overlay click
}

if (balloonState.shouldShowUp()) {
    balloonState.showAlignBottom()
}

// Clear persisted preferences
balloonState.clearAllPreferences()

val width = balloonState.getMeasuredWidth()
val height = balloonState.getMeasuredHeight()

val contentView = balloonState.getContentView()
val arrowView = balloonState.getBalloonArrowView()

@Composable
fun TooltipButton() {
    val builder = rememberBalloonBuilder {
        setArrowSize(10)
        setArrowPosition(0.5f)
        setBackgroundColor(Color.Gray)
    }
    val balloonState = rememberBalloonState(builder)

    // Set up listeners
    LaunchedEffect(balloonState) {
        balloonState.setOnBalloonDismissListener {
            println("Balloon dismissed")
        }
    }

    Button(
        onClick = {
            if (balloonState.isShowing) {
                balloonState.dismiss()
            } else {
                balloonState.showAlignTop()
            }
        },
        modifier = Modifier.balloon(balloonState) {
            Text("Tooltip text", color = Color.White)
        }
    ) {
        Text(if (balloonState.isShowing) "Hide" else "Show")
    }
}

This page documents Balloon `1.7.6`, the last release of the View based library.
For the current version see the [Balloon 2.0.0 documentation](../../index.md) and the
[Migration guide](../../migration.md).

val builder = rememberBalloonBuilder {
    setArrowColor(Color(0xFF4A90E2))
}

val builder = rememberBalloonBuilder {
    setBackgroundColor(Color.DarkGray)
}

val builder = rememberBalloonBuilder {
    setTextColor(Color.White)
}

val builder = rememberBalloonBuilder {
    setIconColor(Color.Yellow)
}

val builder = rememberBalloonBuilder {
    setOverlayColor(Color.Black.copy(alpha = 0.6f))
}

val builder = rememberBalloonBuilder {
    setOverlayPaddingColor(Color.Blue)
}

@Composable
fun ThemedBalloon() {
    val primaryColor = MaterialTheme.colorScheme.primary
    val onPrimaryColor = MaterialTheme.colorScheme.onPrimary
    val surfaceColor = MaterialTheme.colorScheme.surface

    val builder = rememberBalloonBuilder {
        setArrowSize(10)
        setArrowPosition(0.5f)
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setPadding(12)
        setCornerRadius(8f)

        // Use Compose colors directly
        setBackgroundColor(primaryColor)
        setTextColor(onPrimaryColor)
        setArrowColor(primaryColor)
        setOverlayColor(Color.Black.copy(alpha = 0.5f))
    }

    val balloonState = rememberBalloonState(builder)

    Button(
        onClick = { balloonState.showAlignTop() },
        modifier = Modifier.balloon(balloonState) {
            Text(
                text = "Themed tooltip",
                color = onPrimaryColor,
                modifier = Modifier.padding(8.dp)
            )
        }
    ) {
        Text("Show Balloon")
    }
}

val builder = rememberBalloonBuilder {
    val colors = MaterialTheme.colorScheme

    setBackgroundColor(colors.primaryContainer)
    setTextColor(colors.onPrimaryContainer)
    setArrowColor(colors.primaryContainer)
    setOverlayColor(colors.scrim.copy(alpha = 0.5f))
}

val builder = rememberBalloonBuilder {
    setBackgroundColor(Color.Black.copy(alpha = 0.8f))
    setOverlayColor(Color.Black.copy(alpha = 0.4f))
}