I need some help with tooltips please.

[Soliloquy]

Hello there!

I've been having some difficulties mapping tooltips to an image. I'm creating something that requires a bit of background to be fully appreciated, and I thought it would be easier on the player to find out more information by mousing over the class in question rather than be buried under several screens of exposition.

I created a new screen:

Code: Select all

screen class_info:
    
    default tt = Tooltip(" ")
    
    imagemap:
        ground "images/information_screen.png"
        
        hotspot(122,95,151,39) hovered tt.Action("info")
        hotspot(4,189,148,42) hovered tt.Action("info")
        hotspot(234,171,149,43) hovered tt.Action("info")
        hotspot(1,292,92,40) hovered tt.Action("info")
        hotspot(108,291,93,40) hovered tt.Action("info")
        hotspot(232,291,151,42) hovered tt.Action("info")
        hotspot(2,373,151,42) hovered tt.Action("info")
        hotspot(234,371,148,43) hovered tt.Action("info")
        hotspot(2,450,150,42) hovered tt.Action("info")
        hotspot(232,450,152,44) hovered tt.Action("info")
        hotspot(31,531,335,44) hovered tt.Action("info")

and in the script have the following:

Code: Select all

label start:

    scene intro
    $renpy.pause(3)
            
    show screen class_info
    ...

The one failing of Ren'Py documentation is that, while it might tell me what to do, it does not tell me where to put my code, nor how to use it in the script. I stumbled upon the "show screen..." in a totally unrelated thread, and while that DOES get the image to show, the tooltips are not a part of it. At this point, I'm not sure if my screen language is incorrect (likely), if I put that code in the wrong place (also likely), both (hopefully not), or if the code in the script is wrong.

Any help or insight would be greatly appreciated. Thank you in advance. ^^

[ileikturtles]

Hello there!

I've been having some difficulties mapping tooltips to an image. I'm creating something that requires a bit of background to be fully appreciated, and I thought it would be easier on the player to find out more information by mousing over the class in question rather than be buried under several screens of exposition.

I created a new screen:

Code: Select all

screen class_info:
    
    default tt = Tooltip(" ")
    
    imagemap:
        ground "images/information_screen.png"
        
        hotspot(122,95,151,39) hovered tt.Action("info")
        hotspot(4,189,148,42) hovered tt.Action("info")
        hotspot(234,171,149,43) hovered tt.Action("info")
        hotspot(1,292,92,40) hovered tt.Action("info")
        hotspot(108,291,93,40) hovered tt.Action("info")
        hotspot(232,291,151,42) hovered tt.Action("info")
        hotspot(2,373,151,42) hovered tt.Action("info")
        hotspot(234,371,148,43) hovered tt.Action("info")
        hotspot(2,450,150,42) hovered tt.Action("info")
        hotspot(232,450,152,44) hovered tt.Action("info")
        hotspot(31,531,335,44) hovered tt.Action("info")

and in the script have the following:

Code: Select all

label start:

    scene intro
    $renpy.pause(3)
            
    show screen class_info
    ...

The one failing of Ren'Py documentation is that, while it might tell me what to do, it does not tell me where to put my code, nor how to use it in the script. I stumbled upon the "show screen..." in a totally unrelated thread, and while that DOES get the image to show, the tooltips are not a part of it. At this point, I'm not sure if my screen language is incorrect (likely), if I put that code in the wrong place (also likely), both (hopefully not), or if the code in the script is wrong.

Any help or insight would be greatly appreciated. Thank you in advance. ^^

Hey, there! I'm not great at troubleshooting but I have 3 suggestions!

Could it be that the tooltip is appearing somewhere, but you're not seeing it? When I'm calling an image and it's not showing up, I like to set in a very specific place, so that if it's not there, I know that it isn't being rendered. Does that make sense? Try add

Code: Select all

text tt.value style "tooltipcaption":
            text_align 0.5
            xalign 0.5

to your screen, and see what happens.

Another idea is that, at least in my experience, buttons don't seem to work well without an Action (something to do when you click it). Therefore, when I only want the button to have a caption but not actually do anything, I add "action NullAction()"

Code: Select all

   hotspot(31,531,335,44) hovered tt.Action("info") action NullAction()

. See if that helps!

Try those both and see if one of them works! Make sure to implement one change at a time, so if one of them actually solves the problem, you know which fix was the right one C:

Also there's a difference between using "Show screen" and "Call Screen". If I understood correctly, using "show" creates a new instance of it each time, and if you use a bunch of screens it could get memory intensive (and cause weird layering of them). "Call" automatically hides the screen once you navigate off it. So unless the screen is some kind of overlay you want to remain there regardless of whether it's being used currently, you should use Call.

[Soliloquy]

Thanks for the reply! I'm off to try those suggestions now. ^^

Also there's a difference between using "Show screen" and "Call Screen". If I understood correctly, using "show" creates a new instance of it each time, and if you use a bunch of screens it could get memory intensive (and cause weird layering of them). "Call" automatically hides the screen once you navigate off it. So unless the screen is some kind of overlay you want to remain there regardless of whether it's being used currently, you should use Call.

This I did not know. Thankfully right now the image I'm trying to map is the only thing on screen, but I will definitely keep this tidbit in mind as I get further in.

[Soliloquy]

Could it be that the tooltip is appearing somewhere, but you're not seeing it? When I'm calling an image and it's not showing up, I like to set in a very specific place, so that if it's not there, I know that it isn't being rendered. Does that make sense? Try add

Code: Select all

text tt.value style "tooltipcaption":
            text_align 0.5
            xalign 0.5

to your screen, and see what happens.

So far, no dice. Trying to implement this is giving me trouble, as I don't know where to put it to make it actually work. Don't I need to define tooltipcaption somewhere else for this to style it? Do I put it in with the code in screens, or elsewhere? It won't take as an argument or a child to the screen I'm trying to make, so do I put it nearby, but outside the block? I feel like no matter where this goes, it throws an error. >.<

[Soliloquy]

Ohhhhhh, I got it!

Code: Select all

init:
    style tooltipcaption:
        is default
        xalign 0.5
        yalign 0.5
        color "#660000"
        [other styles as deemed appropriate] 

goes at the top of script. Then all I need is the single line text

Code: Select all

tt.value style "tooltipcaption"

in the screen I created. At least if I'm using the default tooltip for everything. If not, I can overwrite with more styles under that single line.

I still have you to thank though, iliketurtles. If I hadn't found your other tutorial thread, this might never have come together. I think I read it the other day whilst searching for a solution, but something about it just clicked today. So thanks! ^^

Now... to get the tips to show up at the mouse... XD

[Soliloquy]

I guess this is as good a place as any to put all of my tooltip-related questions. ^^

Right now I have two.

1. The all-important "how can I get them to appear at the mouse?" because I really, REALLY don't want to do an imagemap, and I still don't quite understand imagebuttons enough to tinker with them. Even if I did, I still need to figure out code to make them appear where I want, instead of all over the place lol.

2. I'm trying to format them a bit. I want to add a frame, wrap text once it gets too long, etc. Is there a way to do this?

[philat]

Try this.

Code: Select all

screen tooltip_test:

    default tt = Tooltip("No button selected.")

    default x = 500 # add three lines to get mouse position
    default y = 400
    $ x,y = renpy.get_mouse_pos()

    frame:
        xfill True
        xalign 0.0
        yalign 0.0

        has vbox

        textbutton "One.":
            action Return(1)
            hovered tt.Action("The loneliest number.")

        textbutton "Two.":
            action Return(2)
            hovered tt.Action("Is what it takes.")

        textbutton "Three.":
            action Return(3)
            hovered tt.Action("A crowd.")

    frame:
        pos(x, y) # this positions the frame at the mouse position - you can adjust by using x + 10 or whatever to fine tune.
        xsize 50 # just made the width 50 so you could see how the frame being small makes the text wrap. Add more styles to the frame as necessary
        text tt.value # style text as necessary

[Soliloquy]

Thanks. I saw this before, but couldn't figure out how to tweak it to work with hotspots. I'll go back to tinkering, though. ^^

Thus far, whenever I try to add a hotspot to that code (whether I take the "has vbox" out or not), I get this:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 30, in script
    $renpy.pause()
  File "game/script.rpy", line 30, in <module>
    $renpy.pause()
  File "game/screens.rpy", line 602, in execute
    screen tooltip_test:
  File "game/screens.rpy", line 610, in execute
    frame:
IndexError: list index out of range

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "game/script.rpy", line 30, in script
    $renpy.pause()
  File "C:\Program Files (x86)\RenPy\renpy\ast.py", line 797, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "C:\Program Files (x86)\RenPy\renpy\python.py", line 1448, in py_exec_bytecode
    exec bytecode in globals, locals
  File "game/script.rpy", line 30, in <module>
    $renpy.pause()
  File "C:\Program Files (x86)\RenPy\renpy\exports.py", line 1148, in pause
    rv = renpy.ui.interact(mouse='pause', type='pause', roll_forward=roll_forward)
  File "C:\Program Files (x86)\RenPy\renpy\ui.py", line 277, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "C:\Program Files (x86)\RenPy\renpy\display\core.py", line 2285, in interact
    repeat, rv = self.interact_core(preloads=preloads, **kwargs)
  File "C:\Program Files (x86)\RenPy\renpy\display\core.py", line 2541, in interact_core
    root_widget.visit_all(lambda i : i.per_interact())
  File "C:\Program Files (x86)\RenPy\renpy\display\core.py", line 343, in visit_all
    d.visit_all(callback)
  File "C:\Program Files (x86)\RenPy\renpy\display\core.py", line 343, in visit_all
    d.visit_all(callback)
  File "C:\Program Files (x86)\RenPy\renpy\display\core.py", line 343, in visit_all
    d.visit_all(callback)
  File "C:\Program Files (x86)\RenPy\renpy\display\screen.py", line 386, in visit_all
    callback(self)
  File "C:\Program Files (x86)\RenPy\renpy\display\core.py", line 2541, in <lambda>
    root_widget.visit_all(lambda i : i.per_interact())
  File "C:\Program Files (x86)\RenPy\renpy\display\screen.py", line 396, in per_interact
    self.update()
  File "C:\Program Files (x86)\RenPy\renpy\display\screen.py", line 565, in update
    self.screen.function(**self.scope)
  File "game/screens.rpy", line 602, in execute
    screen tooltip_test:
  File "game/screens.rpy", line 610, in execute
    frame:
  File "C:\Program Files (x86)\RenPy\renpy\sl2\slast.py", line 743, in execute
    imc = renpy.ui.imagemap_stack[-1]
IndexError: list index out of range

Windows-7-6.1.7601-SP1
Ren'Py 6.99.5.602

I've tried changing the default x and y values as well, to no avail.

For reference, my script has this at the beginning:

Code: Select all

label start:

    scene intro
    $renpy.pause(3)
            
    show screen tooltip_test
    $renpy.pause()
    
    hide screen tooltip_test
    show black

and I have

Code: Select all

hotspot(121,97,151,38) hovered tt.Action("Text text text text") action NullAction()

that I stuck in at various places trying to get at least one of my ten or so hotspots to work.

[philat]

You don't change anything about the hotspots. Just change the code that comes before and after.

ETA: Post the whole code.

[Soliloquy]

Oh, derp. I forgot to erase the "frame" above "xfill True." THAT'S what's been causing all this headache!

Thank you so much for the help! ^^ I guess my last question would be how to keep that random box from showing up when I'm not hovered over anything? And then I'll be out of your hair.

[philat]

Code: Select all

    default tt = Tooltip("") # change this default to this exactly (not " ", actually "")

    if tt.value:
        frame:
            pos(x, y)
            xsize 50
            text tt.value

Since tt.value is now by default an empty string, you can use it to show/hide the frame with an if clause. (I mean, technically you could also write if tt.value == "default value", but that's more work, so...)

[Soliloquy]

Yeah, I learned a tad about ACTUAL empty strings thanks to the nightmare that was Coursera projects lol. I tend to keep them empty by default now. I'm not sure if that will be a good habit as I get further in or not. XD

Thank you so much again! I knew an if statement had to be part of this, but I know JUST enough code to not know what I don't know. You know?

You're an awesome person, and I appreciate the help. Take it easy. ^^

[philat]

Glad to help! Good luck with the rest of your game.

[estatistics]

I had a similar problem. I made it to work according to your valuable information. Here is the code in screen.rpy

Code: Select all

screen script_imagemap:
        default tt = Tooltip("No button selected.")
        default x = 500 # add three lines to get mouse position
        default y = 400
        $ x,y = renpy.get_mouse_pos()

        imagemap:
            ground "White_800_600.png"
            hotspot (24,70,0,0)      hovered tt.Action("The loneliest number.") action NullAction()
            hotspot (477,91,71,97)   hovered tt.Action("The loneliest number.") action NullAction()
            hotspot (761,109,88,115) hovered tt.Action("The loneliest number.") action NullAction()
            hotspot (548,379,95,110) hovered tt.Action("The loneliest number.") action NullAction()
            hotspot (11,28,0,0)      hovered tt.Action("The loneliest number.") action NullAction()
            hotspot (167,177,85,96)  hovered tt.Action("The loneliest number.") action NullAction()
            hotspot (1101,215,0,0)   hovered tt.Action("The loneliest number.") action NullAction()

        vbox:
            pos(x, y) # this positions the frame at the mouse position - you can adjust by using x + 10 or whatever to fine tune.
            xsize 150 # just made the width 50 so you could see how the frame being small makes the text wrap. Add more styles to the frame as necessary
            text tt.value # style text as necessary
            
label script_imagemap:
    call screen script_imagemap
    return

Here the code goes into script.rpy

Code: Select all

label start:
    show screen script_imagemap