Compose Tooltips are stationary and you can't clic...

# compose-desktop

[David W]

Compose Tooltips are stationary and you can't click through them, resulting in them blocking buttons and other UI elements.
Any ideas on how to elegantly avoid this?

The ideal would be the tooltip following the mouse cursor, a set distance away (like many video games do), but I cannot figure out how to do that.
Another option would be dismissing the tooltip or having it recompose when the cursor enters the tooltip, but I'm struggling with that, too.
All of my tooltips use a common background component:

@Composable
fun SmolTooltipBackground(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    Box(
        modifier = modifier
            .pointerMoveFilter(
                onEnter = {
                    println("On Mouse(pointer) Enter")
                    // can i cancel/hide this composable from here?
                    false
                })
    ) {
        content.invoke()
    }
}

[David W]

I got a workable solution.
I wrapped the tooltip content in

var show by remember { mutableStateOf(true) }
    if (show) {

and then just add this to the modifier of the tooltip background

.mouseClickable { show = false }
.pointerMoveFilter(
    onEnter = {
        show = false
        false
    },
    onExit = {
        false
    })

plus i moved the tooltip's placement to -8, -8 offset

[Greg Steckman]

Hi David, have a look at the implementation here, with a HoverableElementArea composable that lets you then apply a hoverableElement modifier on child components which allows you to specify a Composable to popup when the mouse enters the component (and it follows the mouse).

[David W]

thank you! i'll check that out

[Greg Steckman]

You can find some examples of usage in the "samples" counterpart to this project here

[Greg Steckman]

I wrote it so feel free to ask any questions

[Greg Steckman]

and of course suggestions for improvement!

[David W]

I was expecting `HoverableElementArea`to be a drop-in replacement for TooltipArea or Box, but it doesn't render content properly

[David W]

looks like you have to manually place your content if you want to use it

[David W]

just having it as an empty element breaks things

[David W]

(as well as using it)

[Greg Steckman]

ok I'll have to look at that. It should work basically like Box, but give you access to the hoverableElement modifier.

[Greg Steckman]

Something simple like this works:

HoverableElementArea {
    Column {
        Card(modifier = Modifier.hoverableElement { Text("Hello World") }) {
            Text("This is a card with a hover element")
        }
    }
}

[Greg Steckman]

would be great to find out what about your content is causing it to not work.

[Dragos Rachieru]

Cool UI tho