[Solved] Help with hiding menu screen tooltips

[Asarus]

Hi,

I'm wrestling with creating a new user interface, and with the help of Leon and Uncle Mugen's Imagebutton GUI Framework, I learned how to properly use imagebuttons. I also got the notion to try using tooltips from that project, and they work, but they won't go away when the imagebuttons they belong to are clicked. In Leon and Uncle Mugen's project, the tooltips don't go away either, but they have a box reserved for them, so they don't need to. I've made my tooltips in the form of thought bubbles that obscure the menus that are opened when they remain on screen.

I've googled for solutions and tried to make work the only one I found that seemed to work, a question posed by Uncle Mugen about this precise issue on GIT-hub.

The answer he gets is this:

You'll want to add something like:

on "replaced" action Hide('gui_tooltip')

Mugen confirms that this did indeed work. I can't for the life of me make it, though. Is this supposed to be a prolonged part of the imagebutton declaration? Its own little section somewhere in my code? Can someone help me use this snippet of code correctly?

Screenshots (Warning: I make a boy x boy furry game and the main menu features characters that are sort of... bulgy.)





My code:

Code: Select all

## MAIN MENU SCREEN (NEW)
## Used to display the main menu when Ren'Py starts.
##
## https://www.renpy.org/doc/html/screen_special.html#main-menu

screen main_menu:
    tag menu # This ensures that any other menu screen is replaced.
    # begin-end comments like the one in the next line are used to display code examples in the game

    #Adds the main menu background.
    add "gui/main_menu_background.png" # Add a background image for the main menu.
    add "gui/main_menu_overlay.png"

    #Adds the characters.
    if persistent.statusemerson == "None":
        add "gui/chars/main_emerson_shadow.png"
    elif "Familiar":
        add "gui/chars/main_emerson_normal.png"

    if persistent.statusbale == "None":
        add "gui/chars/main_bale_shadow.png"
    elif "Familiar":
        add "gui/chars/main_bale_normal.png"

    if persistent.statusthorne == "None":
        add "gui/chars/main_thorne_shadow.png"
    elif "Familiar":
        add "gui/chars/main_thorne_normal.png"

    if persistent.statusothello == "None":
        add "gui/chars/main_othello_shadow.png"
    elif "Familiar":
        add "gui/chars/main_othello_normal.png"

    if persistent.statusfelix == "None":
        add "gui/chars/main_felix_shadow.png"
    elif "Familiar":
        add "gui/chars/main_felix_normal.png"

    #Adds the main menu banner
    add "gui/main_menu_banner.png"

    imagebutton auto "gui/btn/btn_main_start_%s.png" xpos 0 ypos 0 focus_mask True action Start() hovered [ Play ("channel_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_start.png", my_tt_xpos=0, my_tt_ypos=0)] unhovered [Hide("gui_tooltip")] #at main_eff1
    # Imagebutton documentation: http://www.renpy.org/doc/html/screens.html#imagebutton
    # auto - is used to automatically define the images used by this button. We could also use:
    # imagebutton idle "main_start_idle.png" hover "main_start_hover.png"
    # xpos 1000 ypos 330 - are used set the coordinates to position the button at 1000, 330
    # focus_mask True ensures that only non-transparent areas of the button can be focused. focus_mask defines which parts of the image can be focused, and hence clicked on. Documentation: http://www.renpy.org/doc/html/style.html#button-style-properties
    # action - action to run when the button is activated. This also controls if the button is sensitive, and if the button is selected.
    # hovered - action to run when the button gains focus. Square brackets are used to run multiple actions. In this case we play a sound effect and show a tooltip.
    # unhovered - action to run when the button loses focus. In this case we hide a tooltip.
    imagebutton auto "gui/btn/btn_main_load_%s.png" xpos 0 ypos 0 focus_mask True  action ShowMenu('load') hovered [ Play ("channel_two", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_load.png", my_tt_xpos=0, my_tt_ypos=0)] unhovered [Hide("gui_tooltip")]
    imagebutton auto "gui/btn/btn_main_settings_%s.png" xpos 0 ypos 0 focus_mask True action ShowMenu('preferences') hovered [ Play ("channel_three", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_settings.png", my_tt_xpos=0, my_tt_ypos=0) ] unhovered [Hide("gui_tooltip")]
    imagebutton auto "gui/btn/btn_main_extras_%s.png" xpos 0 ypos 0 focus_mask True action ShowMenu('about') hovered [ Play ("channel_four", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_extras.png", my_tt_xpos=0, my_tt_ypos=0) ] unhovered [Hide("gui_tooltip")]
    imagebutton auto "gui/btn/btn_main_help_%s.png" xpos 0 ypos 0 focus_mask True action ShowMenu('help') hovered [ Play ("channel_five", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_help.png", my_tt_xpos=0, my_tt_ypos=0) ] unhovered [Hide("gui_tooltip")]
    imagebutton auto "gui/btn/btn_main_quit_%s.png" xpos 0 ypos 0 focus_mask True action Quit(confirm=False) hovered [ Play ("channel_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_quit.png", my_tt_xpos=0, my_tt_ypos=0) ] unhovered [Hide("gui_tooltip")]

[kivik]

Try adding it to your action and see if it works?

Code: Select all

imagebutton auto "gui/btn/btn_main_start_%s.png":
    xpos 0 ypos 0 
    focus_mask True 
    action [Hide("gui_tooltip"), Start()] # here
    hovered [ Play ("channel_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_start.png", my_tt_xpos=0, my_tt_ypos=0)]
    unhovered [Hide("gui_tooltip")]

I've broken down your imagebutton to make it easier to read

[xavimat]

I suggest you to not use hovered but the built-in tooltip in renpy screens. It automatically shows and hides on hover/unhover without worrying about it. (Use the hovered action only for the sound effect.)
https://www.renpy.org/doc/html/screen_a ... l#tooltips

Tooltip can be more than a string, in your case, you can put a list with the three informations you are passing to the screen tooltip (or better, a dictionary).

Code: Select all

screen whatever():
    
    imagebutton:
        auto "gui/btn/btn_main_load_%s.png" 
        xpos 0 ypos 0 focus_mask True  
        action ShowMenu('load') 
        hovered Play ("channel_two", "sfx/click.wav")
        tooltip {"my_picture":"gui/tt/tt_main_load.png", "my_tt_xpos":0, "my_tt_ypos":0}

    $ tooltip = GetTooltip()

    if tooltip:
        add tooltip["my_picture"] xpos tooltip["my_tt_xpos"] ypos tooltip["my_tt_ypos"]

[Asarus]

Try adding it to your action and see if it works?

Code: Select all

imagebutton auto "gui/btn/btn_main_start_%s.png":
    xpos 0 ypos 0 
    focus_mask True 
    action [Hide("gui_tooltip"), Start()] # here
    hovered [ Play ("channel_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tt/tt_main_start.png", my_tt_xpos=0, my_tt_ypos=0)]
    unhovered [Hide("gui_tooltip")]

I've broken down your imagebutton to make it easier to read

It totally worked! Thanks a lot for this suggestion! I didn't realize I could give several actions to it at once, that's awesome! And also thanks for breaking up my code, I'm going to follow this example and write a whole lot neater code in the time to come!

[Asarus]

I suggest you to not use hovered but the built-in tooltip in renpy screens. It automatically shows and hides on hover/unhover without worrying about it. (Use the hovered action only for the sound effect.)
https://www.renpy.org/doc/html/screen_a ... l#tooltips

Tooltip can be more than a string, in your case, you can put a list with the three informations you are passing to the screen tooltip (or better, a dictionary).

Code: Select all

screen whatever():
    
    imagebutton:
        auto "gui/btn/btn_main_load_%s.png" 
        xpos 0 ypos 0 focus_mask True  
        action ShowMenu('load') 
        hovered Play ("channel_two", "sfx/click.wav")
        tooltip {"my_picture":"gui/tt/tt_main_load.png", "my_tt_xpos":0, "my_tt_ypos":0}

    $ tooltip = GetTooltip()

    if tooltip:
        add tooltip["my_picture"] xpos tooltip["my_tt_xpos"] ypos tooltip["my_tt_ypos"]

Ah, and here I was thinking that I *was* doing it the "official" way. Heh, guess not! I'm going experiment a bit with refining the code with the real tooltip function and see if that might make the code better in the long run! Thanks a lot for the suggestion!

[xavimat]

Another suggestion, (sorry)
Have you tried "hover_sound" instead of "hovered Play"
https://renpy.org/doc/html/style_proper ... over_sound

[Asarus]

Another suggestion, (sorry)
Have you tried "hover_sound" instead of "hovered Play"
https://renpy.org/doc/html/style_proper ... over_sound

Oh, I actually didn't! I will give this one a try too! Thanks a lot for the tip!

Edit: I tried it, it worked, and I'm using it now!

[Imperf3kt]

Hmm, thanks for this info. I'll try it out too.

I too made some tooltips that were shown by hover state. Worked great, except on touchscreen devices and in rare instances when switching screens and the hovered button didn't lose focus.