Tooltips showing more than text, but multiple images and multiple text posts too

[Tow4352]

Hey there. If you hover over a choice, you should ideally be able to see an explanation text (already implemented) and then in an Upperbox above Stat symbols, sometimes with numbers. Like: -30 (Rings Image), + 2 (Touch Image) etc.

I fear this might be rather complicated and do hope someone knows a way to implement this. I copied my code here. And in case you are getting confused by it, here a short explanation to the choice menu.

A choice consists here out of an imagebutton (black box hover/unhover), a textbutton (choice text hover/unhover) and an energy ball that is sometimes shown. If it is shown, it means that the action costs energy and there is a number on that image of an energyball as well. Furthermore, all three things are made so that when you hover over one, the others are hovered (albeit the Energyball has no hovering image, so you know.)

I hope this helps and I hope someone can help me with this.

Code: Select all

    menu:
        "Hey, Cream. How are you doing with your homework?" (tooltip='Cream has some homework over the summer holidays. Maybe it is worth checking it out?'):

Code: Select all

style hover_choice_button2 is choice_button2:
    background "gui/button/choice_hover_background2.png"

style hover_choice_button2_text is choice_button2_text:
    idle_color '#919191'

style energynumber:
    size 36
    font "gui/NiseSegaSonic.ttf"
    color '#ffffff'
    outlines [ (absolute(2), "#000", absolute(0), absolute(0)) ]

screen choice(items):
    default hovered_choice = None

    add "gui/textbox.png":
        yalign 1.0

    add "gui/stats/Upperbox.png":
        pos 0, 735

    if txtname == "Cream":
        text "Cream":
            style "namebox"
            color "#f59342"
            outlines [ (absolute(2), "#000000", absolute(0), absolute(0)) ]
            size 45
            xpos 105
            ypos 841

    textbutton items[0].caption:
        pos 85, 330
        action items[0].action
        if hovered_choice == 0:
            style "hover_choice_button2"
        else:
            style "choice_button2"
        hovered SetScreenVariable("hovered_choice", 0)#, Hide("say")
        unhovered SetScreenVariable("hovered_choice", None)#, Show("say")
        tooltip items[0].kwargs.get('tooltip')#:
        #tooltip TooltipUp

    imagebutton:
        pos 590, 345
        action items[0].action
        if hovered_choice == 0:
            idle "gui/button/Button_Up_[ColorUp].png"
        else:
            idle "gui/button/Button_Up_[ColorUp].png"
        hovered SetScreenVariable("hovered_choice", 0)
        unhovered SetScreenVariable("hovered_choice", None)
        tooltip items[0].kwargs.get('tooltip')

    if EnergyUp > 0:
        imagebutton:
            pos 0.03, 0.28
            action items[0].action
            if hovered_choice == 0:
                idle "gui/button/Energy_Ball_Up.png"
            else:
                idle "gui/button/Energy_Ball_Up.png"
            hovered SetScreenVariable("hovered_choice", 0)
            unhovered SetScreenVariable("hovered_choice", None)
            tooltip items[0].kwargs.get('tooltip')
        text "[EnergyUp]":
            pos 0.048, 0.3225 anchor 0.5, 0.5
            style "energynumber"


    if len(items) > 1:
        textbutton items[1].caption:
(...)
(...)
(...)

    $ tooltip = GetTooltip()

    if tooltip:
        text "[tooltip]":
            style "say_dialogue"
            pos 102, 895

[_ticlock_]

I'd suggest using item arguments.
https://patreon.renpy.org/menu-argument ... -arguments

You can use item arguments to pass necessary text or/and images as variables to the choices. In the choice screen, you need to implement how and when this info is shown.

[Ocelot]

You do not have to have text as tooltip. You can have any object registered as tooltip. Then youi can extract nessesary info from it and generate tooltip screen froom it.

[Tow4352]

Thank you two for the help. Albeit, there are things that are unclear to me.

item arguments, while interesting, only shows an example where buttons are hidden if certain conditions aren't met. There is nothing about text or images added after reading through it, so the implementation is very unclear to me. Can you explain to me how I can do it?

If I should use tooltip, does this really mean multiple different things like several texts and several images can be used with it at the same time? And if yes, how can I do that?

[Ocelot]

If I should use tooltip, does this really mean multiple different things like several texts and several images can be used with it at the same time? And if yes, how can I do that?

You can do something like this (NOT tested, there might be some syntax errors):

Code: Select all

class MultyPropertyTooltip:
    __init__(self, *props):
        self.properties = props
        
        
default items = {
    "some_item_1": {
        "name": "Item name",
        "tooltip": MultyPropertyTooltip(
            ("image/icon1", "some data"), (("image/icon2", "some other data")
        )
    }
}

screen some_screen(items): # previous dictionary is passed to this screen
    for item in items:
        textbutton item["name"]
        tooltip item["tooltip"]
        action NullAction()
        
    $ tooltip = GetTooltip()
    if tooltip:
        if isinstance(tooltip, MultyPropertyTooltip):
            hbox:
                for img, desc in tooltip.properties:
                    frame:
                    	add img
                    	text desc

[_ticlock_]

item arguments, while interesting, only shows an example where buttons are hidden if certain conditions aren't met. There is nothing about text or images added after reading through it, so the implementation is very unclear to me. Can you explain to me how I can do it?

If I should use tooltip, does this really mean multiple different things like several texts and several images can be used with it at the same time? And if yes, how can I do that?

Both approaches can be used. Ocelot provided an example using the tooltip. For consistency, here is an example with item arguments:

Code: Select all

label start:
    menu:
        "Option - 1" (rings=-30, touch=2):
            "Yes"

Code: Select all

screen choice(items):
    default hovered_choice = None
    
    ...
    
    if hovered_choice != None:
        hbox:
            xalign 1.0 yalign 0.1
            if items[hovered_choice].kwargs.get("rings", False):
                add "rings.png"
                text "{:+}".format(items[hovered_choice].kwargs.get("rings"))
                null width 10
            if items[hovered_choice].kwargs.get("touch", False):
                add "touch.png"
                text "{:+}".format(items[hovered_choice].kwargs.get("touch"))
                null width 10

For simplicity, I didn't use for loop.

[Tow4352]

Thanks for the code. I am not sure how to use it though. Does tooltip has to be used outside the screen choice? How would I connect it then? What is "someotherdata" in default? How do I write choices with this that use this tooltip? How does this work with hbox? The Upperbox could be filled out like an hbox, but there is still description text that needs into the textbox below, so I am not sure it would work unless I have to do a second tooltip or use another function entirely for it?

Sorry. Just not sure where to begin.

Upperbox is the blue box. And text description is in that orange box. Text description is already done with tooltip. I hope to have things work with the Upperbox too.

[_ticlock_]

Sorry. Just not sure where to begin.

If you'd like you can also check my example above. I think it should work with your choice screen as it is.

[Tow4352]

Sorry. Just not sure where to begin.

If you'd like you can also check my example above. I think it should work with your choice screen as it is. And how to center the text with the image. Like so it is in the middle with Y.

I thank you. It is indeed rather useful and works. I just would ask now how to position it. I have several sections in my blue box and need to place the first item in one, the second item in the next and so on.

Code: Select all

    if hovered_choice != None:
        hbox:
            pos 50, 755
            if items[hovered_choice].kwargs.get("rings", False):
                add "gui/stats/Stat_Rings.png"
                text "{:+}".format(items[hovered_choice].kwargs.get("rings"))
                null width 10
            if items[hovered_choice].kwargs.get("touch", False):
                add "gui/stats/Stat_Touch.png"
                text "{:+}".format(items[hovered_choice].kwargs.get("touch"))
                null width 10

[_ticlock_]

I just would ask now how to position it. I have several sections in my blue box and need to place the first item in one, the second item in the next and so on. I also want to ask how I can style the text I use for it.

If your images are the same size and you don't expect large numbers, I would do something like this:

Let's say
Blue box size width=110,100
image size 50, 80
you can wrap text into fixed sets its size make it 50,80 (same height as for image for better alignment)
null width 10 as spacing between stats
thus width = 50(image) + 50(text) + 10(spacing) = 110(blue box)

To avoid setting style properties for each element, you can use style_prefix.

Code: Select all

    
    if hovered_choice != None:
        hbox:
            style_prefix "statchoice"
            pos 50, 755
            spacing 0
            if items[hovered_choice].kwargs.get("rings", False):
                add "gui/stats/Stat_Rings.png"
                fixed:
                    text "{:+}".format(items[hovered_choice].kwargs.get("rings"))
                null width 10
            if items[hovered_choice].kwargs.get("touch", False):
                add "gui/stats/Stat_Touch.png"
                fixed:
                    text "{:+}".format(items[hovered_choice].kwargs.get("touch"))
                null width 10

Setting fixed size for the text:

Code: Select all

style statchoice_fixed:
    xsize 50 ysize 80

Setting text style:

Code: Select all

style statchoice_text:
    xalign 0.5 yalign 0.5
    # other text style properties

[Tow4352]

Thanks again. I did try to have the text and the images middle out with that style, made size 80, 80, same as images, but the text is still too high and not in the middle. Doesn't look like it moved the text at all, sadly.

Not sure how width will work out. I mean, the first box is a bit longer as the RWC stat can have +10, hence longer text. So I worry, the spacing could cause problems. Is it possible to set things manually? Manual positions with x would be nice for each value.

Also, I haven't tried it out yet, but I hope it doesn't matter in which order I have the stats. Sometimes after all, one stat is needed and another one is not. But I don't think it would be a problem with the formula. Just making sure it will all stand neatly in the boxes.

[_ticlock_]

Thanks again. I did try to have the text and the images middle out with that style, made size 80, 80, same as images, but the text is still too high and not in the middle. Doesn't look like it moved the text at all, sadly.

Did you use fixed and set its size to 80,80? Example without using style_prefix, but manually set the style parameters for text and fixed:

Code: Select all

                fixed:
                    xsize 80 ysize 80
                    text "{:+}".format(items[hovered_choice].kwargs.get("rings")):
                        xalign 0.5 yalign 0.5

Not sure how width will work out. I mean, the first box is a bit longer as the RWC stat can have +10, hence longer text. So I worry, the spacing could cause problems.

What if you don't have RWC stat? The first box should be blank? if yes, you can always change the fixed size for example from 80,80 to 120,80 for the RWC stat only:

Code: Select all

            if items[hovered_choice].kwargs.get("rings", False):
                add "gui/stats/Stat_Rings.png"
                fixed:
                    xsize 120 ysize 80
                    text "{:+}".format(items[hovered_choice].kwargs.get("rings"))
                null width 10
            else:
                # No RWC stat -> blank first blue box. Add null width with size of the fist blue box
                null width 210

Also, I haven't tried it out yet, but I hope it doesn't matter in which order I have the stats. Sometimes after all, one stat is needed and another one is not. But I don't think it would be a problem with the formula. Just making sure it will all stand neatly in the boxes.

It is not a problem. The only question is what to do with the first blue box. If you are ok with having it blank when no RWC stat you can use the code above. Number of stats, and their order don't matter.

[Tow4352]

Thank you for your help. That first one sadly doesn't work and breaks the code.

Code: Select all

    if hovered_choice != None:
        hbox:
            #style_prefix "statchoice"
            pos 50, 745
            fixed:
                xsize 80 ysize 80
                text "{:+}".format(items[hovered_choice].kwargs.get("rings")):
                    xalign 0.5 yalign 0.5

Value Error: Sign not allowed in sign format specifier

Also, I would rather not have it blank if no RWC is given, but instead have another value get shoved into it. The second code didn't take care of the text and image aligning either, so not sure how to solve that.

It would be ideal if I could say xpos is that for the first, xpos is that for the second in line and so on.

[Tow4352]

I think I will simply have yalign be higher than 0.5. Someone told me that it shouldn't be done, but if it works, it works. It would help me get the text aligned better with the image. That way, at least that one problem is solved.

[_ticlock_]

The second code didn't take care of the text and image aligning either, so not sure how to solve that.

Are you sure that your image height is 80? All images have a height of 80?

I think I will simply have yalign be higher than 0.5.

You can do this, but it is not a good solution. At some point, you might consider changing something, like the size of blue boxes, and you'll have to start over with alignment and everything else. Thus, generally, it is better to try to figure out why it does not work.

Value Error: Sign not allowed in sign format specifier

I believe there is a typo, I don't see where it comes from.

Also, I would rather not have it blank if no RWC is given, but instead have another value get shoved into it.

It would be ideal if I could say xpos is that for the first, xpos is that for the second in line and so on.

I don't see a simple way to address both of them and avoid using for loops and lists. Here is a possible solution, but it requires some understanding of python language:

Code: Select all

    default blue_box_pos = [(50, 745), (200, 745), (300, 745), (400, 745)]
    if hovered_choice != None:
        for i, stat in enumerate([
                                             ("rings", "gui/stats/Stat_Rings.png"),
                                             ("touch", "gui/stats/Stat_Touch.png")
                                             ]):
            hbox:
                pos blue_box_pos[i]
                if items[hovered_choice].kwargs.get(stat[0], False):
                    add stat[1]
                    text "{:+}".format(items[hovered_choice].kwargs.get(stat[0])):
                        yalign 0.5