ArrowOrientation is flipped to the opposite direction

[easyhooon]

Please complete the following information:

• Library Version [v1.6.7]
• Affected Device(s) [Samsung Galaxy s24+ with Android 14]

Describe the Bug: There is an issue where occasionally, when entering a screen that uses this tooltip, the tooltip appears on the screen in the opposite direction to the set ArrowOrientation (After navigating to another screen and returning, it reverts to the set direction).

@Composable
fun SchoolSearchTitleWithToolTip(
    title: String,
    onTitleClick: (Boolean) -> Unit,
    completeOnboarding: (Boolean) -> Unit,
) {
    ToolTip(
        description = stringResource(id = R.string.map_school_search_tool_tip_description),
        arrowPosition = 0.5f,
        arrowOrientation = ArrowOrientation.START, // <- START 
        completeOnboarding = completeOnboarding,
    ) {
        Row(
            modifier = Modifier
                .padding(start = 22.dp, top = 10.dp, bottom = 10.dp, end = 9.dp)
                .clickable {
                    onTitleClick(true)
                    completeOnboarding(true)
                },
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text(
                text = title,
                style = Title1,
            )
            Spacer(modifier = Modifier.width(7.dp))
            Icon(
                imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_below),
                contentDescription = "Search School",
                tint = Color.Unspecified,
            )
        }
    }
}

@Composable
fun ToolTip(
    description: String,
    arrowOrientation: ArrowOrientation,
    arrowPosition: Float,
    completeOnboarding: (Boolean) -> Unit,
    content: @Composable () -> Unit,
) {
    val scope = rememberCoroutineScope()
    val context = LocalContext.current

    val builder = rememberBalloonBuilder {
        setArrowSize(10)
        setArrowPosition(arrowPosition)
        setArrowOrientation(arrowOrientation)
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setPadding(9)
        setCornerRadius(8f)
        setBackgroundColor(context.getColor(R.color.tooltip_color))
        setBalloonAnimation(BalloonAnimation.FADE)
        setDismissWhenClicked(true)
        setDismissWhenTouchOutside(false)
        setFocusable(false)
    }

    Balloon(
        builder = builder,
        balloonContent = {
            Text(
                modifier = Modifier
                    .wrapContentWidth()
                    .noRippleClickable {
                        completeOnboarding(true)
                    },
                text = description,
                textAlign = TextAlign.Center,
                color = Color.White,
                style = Content5,
            )
        },
    ) { balloonWindow ->
        content()
        LaunchedEffect(key1 = Unit) {
            scope.launch {
                balloonWindow.awaitAlignEnd()
            }
        }
    }
}

When the issue occurs

When re-entering after navigating to another screen

It seems to be an issue that occasionally occurs when the space for this tooltip is limited.

Expected Behavior: If the ArrowOrientation is set to Start direction (<-), it should always be displayed on the screen as set to Start. There was a previous issue reported where, when setting the ArrowOrientation to Bottom direction, the direction changed to Top.

https://github.com/skydoves/Balloon/issues/627

As more detailed information might be needed, I'm attaching a link to the project where you can check the Compose and Kotlin versions, among other details.

https://github.com/Project-Unifest/unifest-android

[skydoves]

Hi @easyhooon, I'm curious if the issue persists even after setting the orientation rule with setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED).

[easyhooon]

Ah... I see that setting was there. It seems I didn't read the documentation properly. As you mentioned, after applying the ₩setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED)`, the problem described above no longer occurs. Thank you. (It turns out it was indeed set to the opposite direction due to lack of space... The explanation in the documentation says exactly that. I apologize.)

[easyhooon]

The issue has been resolved. Thank you :)

[skydoves]

My pleasure! Have a nice day 😄