i am tryiong to use `TooltipArea` , but now the co...

# compose-desktop

[Nikky]

i am tryiong to use TooltipArea , but now the component reserves empty space around it that matches the tooltip size, any idea what causes that ? or how to avoid it ?
i mainly want to use this to show tooltips on IconButton

http://nikky.moe/img/java_V4mVxzrjTe.png▾

[Alexander Maryanovsky]

Can you post the snippet that does this?

[Nikky]

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun WithTooltip(
    tooltip: @Composable () -> Unit,
    content: @Composable () -> Unit
) {
    TooltipArea(
        tooltip = {
            Surface(
                modifier = Modifier.shadow(4.dp),
                color = MaterialTheme.colors.surface,
                shape = RoundedCornerShape(4.dp),
            ) {
                Box(
                    modifier = Modifier.padding(10.dp)
                ) {
                    tooltip()
                }
            }
        },
        modifier = Modifier.padding(start = 40.dp),
        delayMillis = 600, // In milliseconds
        tooltipPlacement = TooltipPlacement.CursorPoint(
            alignment = Alignment.BottomEnd,
            offset = DpOffset(
                (16).dp,
                (-16).dp
            ),
        )
    ) {
       content()
    }
}

Row {
Text("gap here:")
WithToolTip(
   tooltip = { Text("tooltip") }
) {
     Button(
         onClick = {},
     ) {
         Text("Hover over me?")
     }
}
}

using 1.8.0-beta01

[Nikky]

seems to happen because it is in a Row maybe?

edit: no.. happens either way.. i am gonna make a little demonstration

[Nikky]

here is a selfcontained example

package ui.test

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.TooltipArea
import androidx.compose.foundation.TooltipPlacement
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.singleWindowApplication

@OptIn(ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(
    WindowState(width = 300.dp, height = 350.dp),
    title = "Tooltip Example"
) {
    val buttons = listOf("Button A", "Button B", "Button C", "Button D", "Button E", "Button F")
    Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
        buttons.forEachIndexed { index, name ->
            // Wrap the button in TooltipArea
            if (index == 0) {
                Button(onClick = {}) { Text(text = name) }
            } else {
                Box(modifier = Modifier.background(Color.Red)) {
                    TooltipArea(
                        tooltip = {
                            // Composable tooltip content:
                            Surface(
                                modifier = Modifier.shadow(4.dp),
                                color = Color(255, 255, 210),
                                shape = RoundedCornerShape(4.dp)
                            ) {
                                Text(
                                    text = "Tooltip for $name",
                                    modifier = Modifier.padding(10.dp)
                                )
                            }
                        },
                        modifier = Modifier.padding(start = 40.dp),
                        delayMillis = 600, // In milliseconds
                        tooltipPlacement = TooltipPlacement.CursorPoint(
                            alignment = Alignment.BottomEnd,
                            offset = if (index % 2 == 0) DpOffset(
                                (-16).dp,
                                0.dp
                            ) else DpOffset.Zero // Tooltip offset
                        )
                    ) {
                        Button(onClick = {}) { Text(text = name) }
                    }
                }
            }
        }
    }
}

based on https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-desktop-tooltips.html

http://nikky.moe/img/java_UYfOEco90m.png▾

first button has no tooltip, the ToolTIpAreas are wrapped in Box with a red background
see

https://resources.jetbrains.com/help/img/kotlin-multiplatform-dev/compose-desktop-tooltips.animated.gif▾

as well

[Alexander Maryanovsky]

I’m not sure I see the problem.

[Alexander Maryanovsky]

The left padding is due to Modifier.padding(start = 40.dp)
The padding around the button is the regular button padding.

[Nikky]

oh yeah.. i am really just too tired today, sorry for the confusion

[Alexander Maryanovsky]

No worries