Ren'Py Imagebutton tooltip position

[NotJonathanFrakes]

Hello there, I'm trying to use tooltips on my map with a little overlay bar behind the text with custom coordinates depending on the imagebutton position and the image size used.
But I can't get it to work as I probably misplaced and misused variables for still being very new to renpy.

That's what it looks like right now



And I want it to look like this



The way I was trying to accomplish this, was by setting x and y values inside each imagebutton with "hovered" "SetVariable".
Of course it'd be way more elegant to actually read out the individual image sizes to determine the offset of the tooltip, but I
don't know how to do that either.

This is what my current code in screens.rpy looks like.


screen gameUI:
imagebutton:
xalign 0.5
yalign 0.0
yoffset 30
auto "places/map/mapbutton_%s.png"
action ShowMenu("mapUI")

screen mapUI():
add "places/map/citymap.jpg"
$ tooltip = GetTooltip()
$ ttxpos = 0
$ ttypos = 0
#Bar/Nightclub
imagebutton:
xpos 1257
ypos 58
auto "places/map/mm/bar_%s.png"
focus_mask True
hovered SetVariable("ttxpos", 1317), SetVariable("ttypos", 121)
tooltip "Bar"
action NullAction()
...
if tooltip:
add "places/map/map_tooltipbar.png" xpos ttxpos ypos ttypos
text "{size=32}{color=#222222}[tooltip]{/color=#222222}{/size=32}" xalign 0.5 yalign 1.0



Thank you guys very much in advance!

 

[anne O'nymous]

The way I was trying to accomplish this, was by setting x and y values inside each imagebutton with "hovered" "SetVariable".

The variables are locale to the screen, it's either

You must be registered to see the links

or

You must be registered to see the links

that you should use.

But anyway you don't need this to make your tooltips works:

screen mapUI():
    add "places/map/citymap.jpg"

#Bar/Nightclub
    imagebutton:
        xpos 1257
        ypos 58
        auto "places/map/mm/bar_%s.png"
        focus_mask True
        tooltip ( "Bar", 100, 200 ) # Text, xpos, ypos
        action NullAction()
[...]

    $ tt = GetTooltip()

    if tt:
        add "places/map/map_tooltipbar.png" xpos tt[1] ypos tt[2]
        text "{size=32}{color=#222222}[tt[0]]{/color=#222222}{/size=32}":
            # Adjust inside the background
            xpos ( tt[1] + 10) 
            ypos ( tt[2] + 10 )

 

[NotJonathanFrakes]

That worked, thank you!
Is there a way to actually align the center xpos of the tooltipbar with the center of the imagebuttons xpos?
At first I had all my imagebuttons have the same dimensions, but didn't know of focus_mask, which made it look horrible of course.
So I've reworked all the imagebutton images to be as small as they can be to reduce their hover area,which was retrospectively a waste of time due to the focus_mask function.

And is there a way to center the text, so it appears in the middle of the tooltipbar no matter the text length?

If there were something like

#Bar/Nightclub
    imagebutton:
        xpos 1257
        ypos 58
        auto "places/map/mm/bar_%s.png"
        focus_mask True
        mapmarker = "places/map/mm/bar_idle.png"
        w = mapmarker.getWidth()
        h = mapmarker.getHeight()
        tooltip ("Barwithfancylongname", xpos+w/2-258, ypos+h)
        #258 being half the width of the tooltipbar
        action NullAction()
        ...

 

[anne O'nymous]

And is there a way to center the text, so it appears in the middle of the tooltipbar no matter the text length?

Yeah, but not the way you did it.

For this, you need to put the text in a frame, and apply the background to it. Something more or less like this :

style ttFrame is frame:
    background = "places/map/map_tooltipbar.png"

screen mapUI():
    [...]
    if tt:
        frame style "ttFrame":
            xpos tt[1]
            ypos tt[2]
            text "{size=32}{color=#222222}[tt[0]]{/color=#222222}{/size=32}":

 

[NotJonathanFrakes]

Yeah, but not the way you did it.

For this, you need to put the text in a frame, and apply the background to it. Something more or less like this :

style ttFrame is frame:
    background = "places/map/map_tooltipbar.png"

screen mapUI():
    [...]
    if tt:
        frame style "ttFrame":
            xpos tt[1]
            ypos tt[2]
            text "{size=32}{color=#222222}[tt[0]]{/color=#222222}{/size=32}":

Alright, I got it to work now thanks to your frame idea and added a vbox to center the text.
Entering all the offsets manually seems a little lacking in terms of elegance, but as long as it works, fine by me

$ tt = GetTooltip()
    if tt:
        frame style "ttFrame":
            xpos tt[1]
            ypos tt[2]
            vbox:
                xsize 517 #width of the tooltipbar.png
                ysize 52 #height of the tooltipbar.png
                text "{size=32}{color=#222222}[tt[0]]{/color=#222222}{/size=32}":
                    xalign 0.48
                    ypos -5

The xalign of 0.48 centers it exactly, while 0.5 results in a slight offset to the right for some reason.

Again, thank you very much for your competent help!