Lemma Soft Forums

Posted: **Sun Dec 24, 2017 1:18 pm**

Download files and demo files at:
https://github.com/jsfehler/renpy-mouse-tooltip/

Basic Usage
A MouseTooltip can be created with any type of Displayable as the default value.

It can then be placed onto a screen using the add statement.

Like a normal Tooltip, changing the value is done through the Action() method.

Code: Select all

default mtt = MouseTooltip(Text("No button selected."))

screen tooltip_test:
add mtt

vbox:
    textbutton "One.":
        action Return(1)
        hovered mtt.Action(Text("The loneliest number."))

Posted: **Wed Jan 30, 2019 8:56 am**

Thank you very much for this, it works great. I used this to add a great little hovering tooltip to a project.

For anyone else coming across this in the future, you can customise this quite a lot. I added a background image and centered the text, for instance.

I achieved this with the following code, used as part of a button (textbutton, imagebutton, etc). My background image was 302 pixels wide, 181 pixels tall.

Code: Select all

hovered mtt.Action(Fixed(Image("images/tooltip_box.png"), Text("Load a saved game", text_align=0.5, min_width=302, yoffset=30), xmaximum=302, ymaximum=181))

And this

Code: Select all

default mtt = MouseTooltip(Text(""), padding={"x": -151, "y": -206})

Which is basically just half width, full height, plus 35 pixels, so it appears centered and slightly above the mouse.

In the above code, we add a Fixed to hold everything. The image is self explanatory, this is the background to use. Text, is the text to display. It is aligned with the middle of the box and min_width ensures it fills all available space (otherwise it aligns left). The yoffset pushes the text 30 pixels down from its initial position, this is done so there's some gap between the text and the top edge of the image. You could also add a yoffset to the Image, but remember to invert the direction!

Code: Select all

(Image("images/tooltip_box.png", yoffset=-30)

xmaximum and ymaximum ensure the text doesn't overflow the boundaries of our image and handles line breaks for us.

Posted: **Wed Aug 12, 2020 6:26 pm**

Code may be broken.

I checked out the GitHub link, copied the class definition and added it to my own game. Didn't seem to work. So I downloaded the zip file and launched through Renpy launcher to see how OP used the class. Didn't seem to work either. Perhaps the syntax has been updated and the code no longer works? I didn't change any of the code provided by OP.

(side note: if you want to play around with the code, change the folder named demo to game. Renpy launcher will recognize it and you can launch from there.)

Posted: **Wed Aug 12, 2020 9:26 pm**

Working fine here on the latest renpy version.
Did you place the rpy file in your game folder?

Posted: **Wed Aug 12, 2020 10:51 pm**

I'm on Renpy version 7.3.5.606. I renamed the folder originally titled demo to game, and the following files are in that folder: cache folder, saves folder, icon8-heart-outline-48.png, mouse_tooltip.rpy, mouse_tooltip.rpyc, script.rpy, script.rpyc.

Maybe I changed something in the code or something, either way, it doesn't seem to work for me. I'll copy and paste the code I have in both files here, starting with script.rpy:

Code: Select all

#this is script.rpy

default mtt = MouseTooltip(Text("No button selected."), padding={"x": 10, "y": -10})


label start:

    call screen tooltip_test

    return

    
screen tooltip_test:
    add mtt
    
    vbox:
        textbutton "One.":
            action Return(1)
            hovered mtt.Action(Text("The loneliest number."))

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

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

        textbutton "Hearts.":
            action Return(3)
            hovered mtt.Action(Image("icons8-heart-outline-48.png"))

And here is mouse_tooltip.rpy:

Code: Select all

#this is mouse_tooltip.rpy

init -1500 python:

    class MouseTooltip(Tooltip, renpy.Displayable):
        """A Tooltip whose x/y position follows the mouse's."""
        action = Action

        def __init__(self, default, padding=None, *args, **kwargs):
            super(renpy.Displayable, self).__init__(*args, **kwargs)

            self.default = default
            self.value = default

            self.padding = padding or {}
            self.pad_x = padding.get('x', 0)
            self.pad_y = padding.get('y', 0)

            self.x = 0
            self.y = 0

            self._redraw = False

        @property
        def redraw(self):
            return self._redraw

        @redraw.setter
        def redraw(self, new_value):
            self._redraw = new_value
            renpy.redraw(self, 0)

        def render(self, width, height, st, at):
            # Only Text() displayables have a size method
            try:
                w, h = self.value.size()

            except AttributeError:
                child_render = renpy.render(self.value, width, height, st, at)
                w, h = child_render.get_size()

            render = renpy.Render(w, h)
            render.place(self.value, x=self.x + self.pad_x, y=self.y + self.pad_y)
            return render

        def event(self, ev, x, y, st):
            self.x = x
            self.y = y

            if self.redraw:
                renpy.redraw(self, 0)

            # Pass the event to our child
            return self.value.event(ev, x, y, st)

Here is a video of me trying to run the program: https://youtu.be/22vRYaDpp24
(ignore the error at the end, it's just because there's no confirm screen defined.)

Not entirely sure what's going on, but I'll talk to the original creator to see if there's anything I'm doing wrong.

Posted: **Thu Aug 13, 2020 5:27 pm**

The OP (also the author of the Github repo) posted a fix that can be added to any buttons. This doesn't change how the original class was defined, just how it's used in context of screens:

Code: Select all

textbutton:
    "One" 
    hovered [SetField(mtt, 'redraw', True), mtt.Action(Text("The loneliest number."))] 
    unhovered SetField(mtt, 'redraw', False)

So here is the updated script.rpy that uses the above syntax. Works for me:

Code: Select all

default mtt = MouseTooltip(Text(""), padding={"x": 10, "y": -10})


label start:

    call screen tooltip_test

    return


screen tooltip_test:
    add mtt

    vbox:
        textbutton "One.":
            action Return(1)
            #was originally> hovered mtt.Action(Text("The loneliest number."))
            hovered [SetField(mtt, 'redraw', True), mtt.Action(Text("The loneliest number."))]
            unhovered SetField(mtt, 'redraw', False)

        textbutton "Two.":
            action Return(2)
            #was originally> hovered mtt.Action(Text("Is what it takes."))
            hovered [SetField(mtt, 'redraw', True), mtt.Action(Text("Is what it takes."))]
            unhovered SetField(mtt, 'redraw', False)

        textbutton "Three.":
            action Return(3)
            #was originally> hovered mtt.Action(Text("A crowd."))
            hovered [SetField(mtt, 'redraw', True), mtt.Action(Text("A crowd."))]
            unhovered SetField(mtt, 'redraw', False)

        textbutton "Hearts.":
            action Return(3)
            #was originally> hovered mtt.Action(Image("icons8-heart-outline-48.png"))
            hovered [SetField(mtt, 'redraw', True), mtt.Action(Image("icons8-heart-outline-48.png"))]
            unhovered SetField(mtt, 'redraw', False)

And here is the video demonstrating the program working: https://youtu.be/k04Bos2imA8
Hope this works for people who need it in the future!

Posted: **Fri Aug 14, 2020 12:05 am**

Interesting. I wonder why it is working for me then, it seems clear it should not.

Thanks for the fix and thanks to Human Bolt Diary for the code.

Posted: **Fri Aug 14, 2020 8:14 am**

Is there a way to make the text appear at the top? It seems that sometimes it gets hidden by other screen elements.

Posted: **Sat Aug 15, 2020 6:08 pm**

abysswatcher wrote: ↑Fri Aug 14, 2020 8:14 am Is there a way to make the text appear at the top? It seems that sometimes it gets hidden by other screen elements.

I fixed this issue by placing my tool tip in its own screen and adding use (screen name) at the bottom of each screen I wanted a tool tip to show on.

I think...
I fixed this issue for myself a long time ago, I don't remember for sure if this was how I fixed the issue.

Posted: **Mon Sep 28, 2020 2:13 pm**

This whole thread has been super educational, thanks.
Quick question, is there a way to add a background to the tooltip? Like a white box to make it easier to read?
Might be a dumb question, I just can't figure out if it's possible due to the changing sizes.

Posted: **Mon Sep 28, 2020 8:21 pm**

oldmate4455 wrote: ↑Mon Sep 28, 2020 2:13 pm This whole thread has been super educational, thanks.
Quick question, is there a way to add a background to the tooltip? Like a white box to make it easier to read?
Might be a dumb question, I just can't figure out if it's possible due to the changing sizes.

There's a solution for that posted near the top.
viewtopic.php?p=534545#p504115
But it assumes a fixed size for the background image. It should be possible to modify to scale with the text.

Posted: **Tue Feb 13, 2024 3:12 am**

Small question(s), how do you turn it off-?
Let's say on screen A, i click the image button with the tooltip, it works fine. But on screen B- the tooltip from screen A is still on my cursor until i hover over to another item with a tooltip on screen B. How can i prevent that?

image_2024-02-13_150541480.png: (815.72 KiB) Not downloaded yet

^
This one is screen A, the tooltip is working as intended

Screenshot 2024-02-13 145858.png: (1.24 MiB) Not downloaded yet

^
And this one is screen B, where the tooltip is still there and still moving around with the mouse, even though the action is finished.

Posted: **Tue Feb 13, 2024 10:38 pm**

Ordinarily, you simply need to unfocus / unhover the button that is supplying the tooltip

Hiding the screen should be more than enough

Posted: **Sun Feb 18, 2024 4:01 pm**

abysswatcher wrote: ↑Fri Aug 14, 2020 8:14 am Is there a way to make the text appear at the top? It seems that sometimes it gets hidden by other screen elements.

Posting in case people are wondering the same question:
Just put the

Code: Select all

add mtt

statement at the end of your screen! Ren'py will render them from top to bottom, and that will make the mtt being rendered last, therefore making it appear at the top. (:

Lemma Soft Forums

A Tooltip whose x/y position follows the mouse's.

A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.

Re: A Tooltip whose x/y position follows the mouse's.