Greetings of the day <@U02AB5P2XU6> In the `AdvancedPopover` component, what's the difference betwe...

# kobweb

[Shubham Singh]

Greetings of the day @David Herman

In the AdvancedPopover component, what's the difference between OpenClosePopupStrategy and KeepPopupOpenStrategy?

[S.]

Have you read the KDoc about them? It does explain what they're for, or do you have a specific question

[Shubham Singh]

I did give it a read, wasn't sure if I understood it correctly.

Their API seems very similar to interact with.

[S.]

The "close popup" aspect of them overlaps but I suppose the biggest difference is, that with KeepOpen you only control when it should stay open or close. you can't open it this way. With OpenClose you have full control and can manually open and close it

[S.]

if you want a dedicated close button, you use KeepOpen
if you want to open the popup with a button click, instead of just hovering the target element, you use OpenClose

[Shubham Singh]

I was expecting that calling openClosePopupStrategy.isOpen = false would close the popup even if my mouse is over the element

But apparently it does not
It only works when the mouse is not over the element

I am using the .manual() strategy

[S.]

that's pretty much the exact code snipped in the KeepPopupOpenStrategy Kdoc

[Shubham Singh]

Lol, yes! That's what got me confused
So basically I have a close button inside the popup as well
But I also want it to be closed when the user clicks outside of the popup

So I wasn't sure how to approach it

I thought the manual strategy is the way to go, but I'm facing it to be a bit difficult to get it to behave the way I want

[S.]

do you only want it to close when a user CLICKS outside of it, or when focus of the popup is lost?

[Shubham Singh]

My content inside the popup is technically not focusable

But yes, if I find a way to make it focusable, the .focus() strategy is close to what I'm looking for

[S.]

an important aspect, you can combine multiple strategies

KeepPopupOpenStrategy.combine(
            KeepPopupOpenStrategy.onHover(),
            popupStrategy // manual control
        )

[S.]

so with this you can have a close button and it also closes if the cursor leaves the popup

[S.]

the default strategy is actually hover + focus

[Shubham Singh]

Understood, I'll give it a shot
Thanks!

[David Herman]

Thanks Dome! I think you hit all the answers

[David Herman]

Also @Shubham Singh you may already be doing this but make sure you are `remember`ing your strategy

[David Herman]

The short version for why there are two is because you can definitely be happy with how a tooltip opens by default but not its default hiding logic; and vice versa. Having a close button inside your popup is definitely a case to override KeepPopupOpenStrategy - the default is for the tooltip to go away if the element the popup is attached to loses mouse hover or keyboard focus.

[Shubham Singh]

you may already be doing this but make sure you are `remember`ing your strategy

Yes David! I'm already `remember`ing it ✅

I actually ended up leaving the behaviour to be default, where it shows the popup while the focus is alive. Seems an okay-ish trade-off for now. But I'll keep exploring the manual strategy too.

[David Herman]

This will all be a lot clearer when I can finally add docs for widgets (which is finally on the horizon)

[David Herman]

But you can git clone <https://github.com/varabyte/kobweb>, cd kobweb/playground/site, and kobweb run. In the resulting site, go to the Widgets tab and look at the popup section.

[David Herman]

A while ago I made a prototype card game where cards would link to other cards (e.g. when you play the Attack card you get a bonus), and when you moused over that link, a tooltip showing the secondary card would show up. It would stay up as long as you had your mouse over the original card, that floating card, or if neither, it would start a countdown that would take about, I forget, a second? Before hiding it.

[David Herman]

That's the kind of stuff you'd use KeepPopupOpenStrategy for.