0 votes
by (2.4k points)

Hello there, 

Was wondering if there was any way to have text being displayed when hovering over an image used as a link. For instance : 

<<link [img[$Helmet[2] ][Change your equipment]]>>
<<set $helmet to $Helmet[2]>> <</link>>

I'd like to display the $Helmet caracteristics when the player's cursor goes over the image. (Something like : Force 2, Dexterity 3)...

As usual, thanks a lot for the awesome help you all provide, 

Have a wonderful evening. 

2 Answers

0 votes
by (159k points)
selected by
 
Best answer

You don't include an example of the Array being stored in the $Helmet story variable, so I will assume it looks something like..

<<set $Helmet to [
	"media/helmet-1.png",
	"media/helmet-2.png",
	"media/helmet-3.png"
]>>

note: Naming your Array variable $Helmet (uppercase H) and the variable being used to store the selected element $helmet (lowercase h) can make it easy to mistake one variable for another.

Many Desktop web-browsers support showing an element's title attribute as a tooltip when the mouse cursor is hovering over the element. You can use a comibation of HTML Attribute markup and Attribute Directive markup to achieve the result you want.

<a data-passage="Change your equipment" data-setter="$helmet to $Helmet[2]">
	\<img @src="$Helmet[2]" title="The text you want to see during hover event">
\</a>

 

by (2.4k points)

It works! 
Though I have more than one setter when clicking the link, right now my actual <<link>> looks like this : 

 

<<link [img[$Helmet[0] ][Change your equipment]]>>
<<set $changeOfEquipment to "helmet">>
<<set $helmet to $Helmet[0]>> 
<<actualizeStats 5 $strMinusH 0 $endMinusH -1 $intMinusH>>
<</link>>

 

Is there any way to include all of those setters?

 

Thanks a lot!

by (159k points)
edited by

If you only wanted to assign some values to some story variables...

<<link [img[$Helmet[0] ][Change your equipment]]>>
	\<<set $changeOfEquipment to "helmet">>
	\<<set $helmet to $Helmet[0]>> 
\<</link>>

...then all you need to do is change the data-setter attribute like so...

data-setter="$changeOfEquipment to 'helmet', $helmet to $Helmet[0]"

...but that won't work in the case of calling another macro/widget within the <<link>> macro's body.

You will need to use JavaScript to first locate each of the img elements, and then to add the relevant title attribute to each of them them. You will also need to use one of the Navigation Events & Tasks to delay the execution of that JavaScript until after the img elements have been created.

<<link [img[$Helmet[0] ][Change your equipment]]>>
	\<<set $changeOfEquipment to "helmet">>
	\<<set $helmet to $Helmet[0]>> 
	\<<actualizeStats 5 $strMinusH 0 $endMinusH -1 $intMinusH>>
\<</link>>

<<link [img[$Helmet[1] ][Change your equipment]]>>
	\<<set $changeOfEquipment to "helmet">>
	\<<set $helmet to $Helmet[1]>> 
	\<<actualizeStats 5 $strMinusH 0 $endMinusH -1 $intMinusH>>
\<</link>>

<<script>>
$(document).one(':passagerender', function (ev) {
	const content = $(ev.content);
	content
		.find('img[src="media/helmet-1.png"]')
			.attr('title', 'Text for helmet 0.');
	content
		.find('img[src="media/helmet-2.png"]')
			.attr('title', 'Text for helmet 1.');
});
<</script>>

 

by (2.4k points)

It works perfectly when doing this...

Yet I have an issue. (Again.)

I am using Chapel's <<message>> macro. And it doesn't work within... 
Here's the macro : 

 

// message macro, by chapel (with help from T.M. Edwards); for sugarcube 2
// version 1.0.0
// see the documentation: https://github.com/ChapelR/custom-macros-for-sugarcube-2#message-macro

//intialize namespace
setup.messageMacro = {};

// default text option:
setup.messageMacro.default = 'Help';

// <<message>> macro
Macro.add('message', {
    tags    : null,
    handler : function () {
        var message  = this.payload[0].contents;
        var $wrapper = $(document.createElement('span'));
        var $link    = $(document.createElement(this.args.includes('btn') ? 'button' : 'a'));
        var $content = $(document.createElement('span'));

        $link
            .wiki(this.args.length > 0 && this.args[0] !== 'btn' ? this.args[0] : setup.messageMacro.default)
            .ariaClick(function () {
                if ($wrapper.hasClass('open')) {
                    $content
                        .css('display', 'none')
                        .empty();
                }
                else {
                    $content
                        .css('display', 'block')
                        .wiki(message);
                }

                $wrapper.toggleClass('open');
            });

        $wrapper
            .attr('id', 'macro-' + this.name + '-' + this.args.join('').replace(/[^A-Za-z0-9]/g, ''))
            .addClass('message-text')
            .append($link)
            .append($content)
            .appendTo(this.output);
    }
});

(function () {
    
    var state = [];
    
    prehistory['handle-messages'] = function () {
        state = [];
        $('.message-text').each( function () {
            var $self = $(this);
            if ($self.hasClass('open')) {
                state.push($self.attr('id'))
            }
        });
    };
    
    $(document).on(':passageend', function () {
        state.forEach( function (id) {
            $('#' + id + ' a').trigger('click');
        });
    });
    
}());

 

Here's what I tested out :

 



[img[$Helmet[0]]]
[img[$Helmet[1]]]
<<display "scriptImage">>

<<message "Test">>

[img[$Helmet[0]]]
[img[$Helmet[1]]]
<<display "scriptImage">>

<</message>>

 

Here's what's inside "scriptImage" 

 

<<script>>
$(document).one(':passagerender', function (ev) {
	const content = $(ev.content);
	content
		.find('img[src="images/helmet0.jpg"]')
			.attr('title', 'Your starting helmet.');
	content
		.find('img[src="images/helmet1.jpg"]')
			.attr('title', 'A better helmet. +3 strength, +1 endurance.');

						
});
<</script>>

 

The <<script>> works for 2 first images.

But when in the <<message>> macro, the image displays, but not the text... 

Again, thanks for your incredible help. 

by (159k points)

Delete the <<display "scriptImage">> calls and the assciated scriptImage Passage, then replace both sets of image markups with the following.

<span title="Tooltip for Helment element 0">[img[$Helmet[0]]]</span>
<span title="Tooltip for Helment element 1">[img[$Helmet[1]]]</span>

 

by (2.4k points)

Thanks !

 

But will that work with what you did before ? 

 

<<link [img[$Helmet[0] ][Change your equipment]]>>
	\<<set $changeOfEquipment to "helmet">>
	\<<set $helmet to $Helmet[0]>> 
	\<<actualizeStats 5 $strMinusH 0 $endMinusH -1 $intMinusH>>
\<</link>>

<<link [img[$Helmet[1] ][Change your equipment]]>>
	\<<set $changeOfEquipment to "helmet">>
	\<<set $helmet to $Helmet[1]>> 
	\<<actualizeStats 5 $strMinusH 0 $endMinusH -1 $intMinusH>>
\<</link>>

<<script>>
$(document).one(':passagerender', function (ev) {
	const content = $(ev.content);
	content
		.find('img[src="media/helmet-1.png"]')
			.attr('title', 'Text for helmet 0.');
	content
		.find('img[src="media/helmet-2.png"]')
			.attr('title', 'Text for helmet 1.');
});
<</script>>

 

This, within a <<message>> macro ?

I'm sorry if I mislead you with my previous answer, what I really want is to have the script work for this when it's within the message macro

 

 

by (159k points)

The easiest way to determine if something works is to try it, also all the code examples I supply have been pre-tested unless I specifically state otherwise.

The following is a copy of the test code I used to determine if my latest suggest also works with Chapel's <<message>> macro, it assumes that you have already added this macro to your project and that the <<actualizeStats>> macro/widget actually exists.

<<set $Helmet to [
	"media/helmet-1.png",
	"media/helmet-2.png",
	"media/helmet-3.png"
]>>

<span title="Tooltip for Helment element 0">[img[$Helmet[0]]]</span>
<span title="Tooltip for Helment element 1">[img[$Helmet[1]]]</span>

<<message "Test 1">>
<span title="Tooltip for Helment element 0">[img[$Helmet[0]]]</span>
<span title="Tooltip for Helment element 1">[img[$Helmet[1]]]</span>
<</message>>

<<message "Test 2">>
<span title="Tooltip for Helment element 0">\
<<link [img[$Helmet[0] ][Change your equipment]]>>
	\<<set $changeOfEquipment to "helmet">>
	\<<set $helmet to $Helmet[0]>> 
	\<<actualizeStats 5 $strMinusH 0 $endMinusH -1 $intMinusH>>
\<</link>>
\</span>

<span title="Tooltip for Helment element 1">\
<<link [img[$Helmet[1] ][Change your equipment]]>>
	\<<set $changeOfEquipment to "helmet">>
	\<<set $helmet to $Helmet[1]>> 
	\<<actualizeStats 5 $strMinusH 0 $endMinusH -1 $intMinusH>>
\<</link>>
\</span>
<</message>>

 

by (2.4k points)

Thanks a lot, it works !

Indeed, the best way is usually to try, which I usually do. This time, I didn't, as I had no access to my PC, and I thought I had poorly formulated what I wanted. 

To be honest, I did try your code when I came back home, and didn't manage to make it work. I had done something like : 

 

<<link <span title= "First helmet">[img[$Helmet[1] ]</span>[Change your equipment]]>>
<</link>>

 

The copy of your own test code helped a great deal. 

Anyway, do know I am really grateful for the help you and others provide. I always try to look for answers on my own before asking for something, but my knowledge is so poor that what you might think is obvious really isn't for me most of the time. (I wouldn't have figured out how to use <span title> within my <<message>> <<link>> setup without your example.)

Once I'm done with what I'm doing, I'll try and learn javascript and whatever is actually required to be great at Twine, so I won't be asking questions so much. 

Again, thanks a lot !

 

0 votes
by (44.7k points)

If you'd like a little fancier hover text, where you can add images and other wiki code, you could use this sample code for hover text.  You'd have to modify it a bit to make it work for links, but most of the work is already done for you.

You can also click "Jump to Start" on the UI bar to see other sample code there.

Have fun!  :-)

by (2.4k points)
That's very kind of you. But I am really bad at javascript, css and html. I have no idea how to change the code so it would work as I wish.

That's my next aim; actually learning it all instead of asking for help everytime.

Thanks anyway !
...