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

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
Human Bolt Diary
Regular
Posts: 111
Joined: Fri Oct 11, 2013 12:46 am
Contact:

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

#1 Post by Human Bolt Diary »

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."))

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

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

#2 Post by Imperf3kt »

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.
Image

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.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

User avatar
BlueStylus
Newbie
Posts: 13
Joined: Thu Aug 02, 2018 12:18 am
Completed: Nihil: The Watcher
itch: bluestylus
Contact:

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

#3 Post by BlueStylus »

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.)

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

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

#4 Post by Imperf3kt »

Working fine here on the latest renpy version.
Did you place the rpy file in your game folder?
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

User avatar
BlueStylus
Newbie
Posts: 13
Joined: Thu Aug 02, 2018 12:18 am
Completed: Nihil: The Watcher
itch: bluestylus
Contact:

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

#5 Post by BlueStylus »

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.

User avatar
BlueStylus
Newbie
Posts: 13
Joined: Thu Aug 02, 2018 12:18 am
Completed: Nihil: The Watcher
itch: bluestylus
Contact:

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

#6 Post by BlueStylus »

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!

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

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

#7 Post by Imperf3kt »

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.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

abysswatcher
Regular
Posts: 42
Joined: Sun Apr 12, 2020 11:50 pm
Projects: To-Live:The Struggle
Organization: Youyu de Shijie(憂鬱的世界)
Github: LuYifeng112
itch: https://luyifeng.itc
Location: New Zealand
Contact:

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

#8 Post by abysswatcher »

Is there a way to make the text appear at the top? It seems that sometimes it gets hidden by other screen elements.
The goal of the revolution is to achieve the people's rights, but during the course of the revolution, we must stress military power - and the two are mutually contradictory.
-Sun Yat-sen
"Become a Visual Novel writer they said, it will be fun" (little did they know they were right)

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

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

#9 Post by Imperf3kt »

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.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

oldmate4455
Newbie
Posts: 2
Joined: Tue Aug 18, 2020 3:03 pm
Contact:

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

#10 Post by oldmate4455 »

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.

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

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

#11 Post by Imperf3kt »

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.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

80na_
Newbie
Posts: 5
Joined: Sat Jan 13, 2024 12:16 pm
Tumblr: athenamineblox
Contact:

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

#12 Post by 80na_ »

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.

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

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

#13 Post by Imperf3kt »

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

Hiding the screen should be more than enough
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

User avatar
58 jpegs in C
Newbie
Posts: 1
Joined: Sun Feb 18, 2024 11:35 am
Github: 58-jpegs-in-C

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

#14 Post by 58 jpegs in C »

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. (:

Post Reply

Who is online

Users browsing this forum: No registered users