How to display a tooltip when a hyperlink in dialog is clicked/hovered?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
kavacha
Newbie
Posts: 2
Joined: Mon Apr 30, 2018 7:54 am
Contact:

How to display a tooltip when a hyperlink in dialog is clicked/hovered?

#1 Post by kavacha »

Hello, I'm really newbie in renpy. I want to create a hyperlink in dialog and when it's clicked (or hovered) it will show a tooltip (for the definition of the word). How can I do that?

I have this code:

Code: Select all

label start:

    scene bg lake

    "There is a {a}canoe{/a} over there."
       
    return
When user hover on canoe I want a tooltip displaying the definition of canoe. What do I do next?

Thanks!

User avatar
vollschauer
Veteran
Posts: 231
Joined: Sun Oct 11, 2015 9:38 am
Github: vollschauer
Contact:

Re: How to display a tooltip when a hyperlink in dialog is clicked/hovered?

#2 Post by vollschauer »

This should give you an idea.... since the default config.hyperlink_handlers "show" doesn't allow to pass parameters, you better write you own hyperlink handler
where you can pass a description to a screen or you have to create for every hyperlink you wanna use it's own screen...which would be silly. Anyway good look :D

Code: Select all

label start:

    scene bg lake

    "There is a {a=show:canoe_text}canoe{/a} over there."

    return

screen canoe_text():

    text "A canoe is a lightweight narrow vessel."

    timer 2.0 action Hide("canoe_text")

kavacha
Newbie
Posts: 2
Joined: Mon Apr 30, 2018 7:54 am
Contact:

Re: How to display a tooltip when a hyperlink in dialog is clicked/hovered?

#3 Post by kavacha »

So I used a workaround with a:call and then write labels for each link xD
This is better because with a:show I can see the definition in the same screen, but I don't know how to pass parameters?
Thanks for your help :)

kivik
Miko-Class Veteran
Posts: 786
Joined: Fri Jun 24, 2016 5:58 pm
Contact:

Re: How to display a tooltip when a hyperlink in dialog is clicked/hovered?

#4 Post by kivik »

You can modify this with label instead of screens:

viewtopic.php?t=47216

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to display a tooltip when a hyperlink in dialog is clicked/hovered?

#5 Post by Remix »

A little code snippet to maybe play with:

Some caveats though:
Unhover does not seem to call the text.unfocus() so does not pass None to our handler, so basically the screen stays... timer workaround added.
Keys/phrases are case sensitive.

Code: Select all


define e = Character("Eileen")

init python:

    lexicon = {
        ('Visual Novel', 'VN')  : """
            A visual novel (bijuaru noberu) is an interactive game genre, 
            which originated in Japan in the early 1990s, featuring mostly 
            static graphics, most often using anime-style art or occasionally 
            live-action stills.
            As the name might suggest, they resemble mixed-media novels.""",
        ('Ren\'Py', 'Renpy') : """
            The Ren'Py Visual Novel Engine is a free software engine which 
            facilitates the creation of visual novels, a form of 
            computer-mediated storytelling. Ren'Py is a portmanteau of ren'ai, 
            the Japanese word for 'romantic love' and Python, 
            the programming language that Ren'Py runs on. """
    }

    def hyperlink_lexicon( str_to_test ):
        for keys in lexicon:
            for phrase in keys:
                # preceded by a space
                str_to_test = str_to_test.replace(
                    " {0}".format(phrase),
                    " {{a=lexicon:{phrase}}}{phrase}{{/a}}".format(
                        phrase = phrase ) )
                # followed by a space
                str_to_test = str_to_test.replace(
                    "{0} ".format(phrase),
                    "{{a=lexicon:{phrase}}}{phrase}{{/a}} ".format(
                        phrase = phrase ) )
        return str_to_test

    config.say_menu_text_filter = hyperlink_lexicon

    def hyperlink_styler(*args):
        return style.hyperlink_text

    def hyperlink_hovered(*args):
        if not args[0]:
            # tried renpy.hide_screen ... no joy
            return
        elif args[0][:8] == "lexicon:":
            renpy.show_screen( "lexicon_popup", 
                               args[0][8:], 
                               renpy.get_mouse_pos() )
        renpy.restart_interaction()

    def hyperlink_clicked(*args):
        # We could add a function for clicked here
        return None
    
    style.default.hyperlink_functions = ( hyperlink_styler, 
                                          hyperlink_clicked, 
                                          hyperlink_hovered )


screen lexicon_popup(phrase=None, pos=(100,100)):

    if phrase:

        python:
            # get description
            d = [ lexicon[k] for k in lexicon if phrase in k ]
            description = d[0] if len(d) else "No description found."
            description = " ".join( [ k for k in description.split()
                                      if k not in [" ", "\t"] ] )
            # move the ypos up by a bit
            pos = ( pos[0], pos[1] - 25 )

            # reformat phrase
            p = [ k for k in lexicon if phrase in k ]
            primary_phrase = p[0][0] if len(p) else phrase
            if primary_phrase != phrase:
                phrase = "{0} ({1})".format(phrase, primary_phrase)

        frame:
            anchor (0.5, 1.0)
            pos pos
            xsize 340
            background Solid("#A9B")
            vbox:
                text "[phrase]" size 18
                text "[description]" size 14

    # Hacky workaround as hyperlink_hovered does not seem to nicely hide this
    # Just hide after (4 words per second) guesstimate delay
    timer len(description.split()) / 4.0 action Hide("lexicon_popup")

label start:
    e "Start"
    e "Oh look, this VN is made with Ren'Py"
    e "Test phrases that should not make link... AVNX aRenpyx"
    e "End"
Frameworks & Scriptlets:

Post Reply

Who is online

Users browsing this forum: No registered users