Show buttons when hovered over another button?

[pokestat]

I have an imagebutton, and when I hover over it, I want the player to see two smaller imagebuttons appear on top. The player should be able to click on the smaller buttons while the mouse is still hovered over the larger imagebutton. When the mouse moves away from the larger imagebutton, the smaller imagebuttons should be hidden.

The button should look like this when I hover:
https://imgur.com/a/0YXJn

Here is my test code:

Code: Select all

screen inner_buttons():
    frame:
        xpos 100
        ypos 100
        xanchor 0
        yanchor 0
        vbox:
            imagebutton:
                idle "images/one.png"
                xpos 0
                ypos 0
                action tt.Action("one")
    
            imagebutton:
                idle "images/two.png"
                xpos 0
                ypos 150
                action tt.Action("two")

screen important_button():
    imagebutton:
        idle "images/smile.png"
        hovered ShowTransient("inner_buttons")
        unhovered Hide("inner_buttons")
        xpos 100
        ypos 100
        xanchor 0
        yanchor 0

    frame:
        vbox:
            text tt.value
            
init:
    default tt = Tooltip("No button selected.")

label start:
    call screen important_button

Basically, when I click on the smaller buttons, it updates the tooltip text.

But the result is just the larger button is shown, and any hover action does nothing:

https://imgur.com/a/kHVgr


What did I do wrong?

[Alex]

Why do you use ShowTransient instead of Show?
https://www.renpy.org/doc/html/screen_actions.html#Show

[pokestat]

I switched to using Show() instead, but nothing still shows up. Am I using hover correctly? I'm thinking maybe that's not firing.

[Alex]

Looks like when you hover over inner button, the important button looses focus and hides the screen - comment out unhovered action to test it.

[Remix]

Though you will have to resolve the 'loses focus' issue pointed out by Alex (maybe by toggling a variable with a mousearea or button: container in the small button screen that mimics the main button action... you should also note:
A button without action or sensitive will by default be insensitive and thus not respond to events, so either 'action NullAction()' or 'sensitive True' in the main button...

I would use a variable toggle myself... (pseudo code to give idea - if they show and hide on each repeat hover, then expand to suit)

Code: Select all

default show_minis = False
screen main_button:
    imagebutton:
        hovered ToggleVariable( 'show_minis' )
        sensitive True
    if show_minis:
        use mini_buttons_screen

[pokestat]

Thanks Remix, that was the issue. Setting an action makes the hover events work. I also added a mousearea to resolve the focus issue, which works great!