Sugarcube2/JavaScript, replace span on mousehover tooltip

I’m trying to create a stationary tooltip using javascript to trigger a <<replace>> command. So basically what I’m after is a

<span>Tooltips appear here</span>

at the top of the page and then at the bottom of the page there’ll be buttons

<<button "Fireball">><</button>>

and I want to attach some some flavor text to this button similar to this

<span><<button "Fireball">><</button>>|Launches a ball of fire. -10MP|</span>

Then when the javascript detects I’m hovering over the “Fireball” button it will pull the description from the attached span and use a replace command to print the text inside the tooltip span. So this

<span>Tooltips appear here</span>

would become this

<span>Launches a ball of fire. -10MP</span>

without printing the button and it’s contents. Then when I cease hovering over the button I need it to revert to whatever I set as the default. I’m not quite sure how to set up a function to accomplish this so I’d be grateful for any suggestions or solutions.

I suggest you install and use ChapelR’s <<mouseover>> macro to achieve the effect you want.

A possible usage.

<span id="tooltip">Tooltips appear here</span>

<<mouseover>>
    \<<button "Fireball">><</button>>
<<onhover>>
	<<set _lasttip to $("#tooltip").text()>>
    <<replace "#tooltip">>Launches a ball of fire. -10MP<</replace>>
<<onmouseout>>
	<<replace "#tooltip">>_lasttip<</replace>>
	<<unset _lasttip>>
<</mouseover>>

You could probably use my <<hovertip>> macro for that, though you might also want to take a look at my <<HoverTxt>> widget as well. (Click “Jump to Start” in the UI bar to see other sample code there.)

For what you want you could use the <<hovertip>> macro like this:

<<hovertip "Launches a ball of fire. -10MP">>\
	<<button "Fireball">>
		(Fireball code here)
	<</button>>
<</hovertip>>

You just need to add the JavaScript and CSS code from that sample code to your game (though you’ll probably want to modify the CSS for .hoverTip so that the button doesn’t get the dotted line at the bottom) and then that code should work for you.

Hope that helps! :slight_smile:

Thanks Greyelf, this did the trick! It took me a bit to input it and hook it up but this was exactly what I was hoping for. Thanks for the help.