This macro allows you to use some fancy mouse events to create hover effects, tooltips, or just run arbitrary code when the mouse enters or leaves an element.
Overview
This macro allows you to use some fancy mouse events to create hover effects, tooltips, or just run arbitrary code when the mouse enters or leaves an element.
Macros
<<mouseover>>
<<mouseover>>
Syntax :
<<mouseover>>
[content]
<<onmouseover>> (or <<onhover>>)
[TwineScript to run on mouseover events]
<<onmousein>> (or <<onmouseenter>>)
[TwineScript to run on mousenter events]
<<onmouseout>>
[TwineScript to run on mouseout events]
<</mouseover>>
The <<mouseover>> macro causes some content on the page to be interactive with certain non-click mouse events. The content that becomes interactive is whatever is placed after the opening tag and before the first child tag. The child tags determine what code is run and when. The <<onmouseover>> tag (<<onhover>> also works) triggers on the mouseover event. The <<onmousein>> (<<onmouseenter>> also works) tag triggers on the mouseenter event. The <<onmouseout>> tag triggers on the mouseout event.
📝 Note :
Generally speaking, there isn't a great deal of difference between mouseenter events and mouseover events for most code, but it's included here for completeness.
Usage :
/% create a link with a "tooltip" %/
<<mouseover>>\
<<link 'Do it'>><</link>>\
<<onmousein>>
<<replace '#tooltip'>>: Do the thing.<</replace>>
<<onmouseout>>
<<replace '#tooltip'>><</replace>>
<</mouseover>>\
@@#tooltip;@@
/% play a sound on mouseover %/
<<mouseover>>Spooooooooky<<onmousein>><<audio 'boo' volume 1 play>><</mouseover>>
/% navigate on mouseover %/
Watch the <<mouseover>>[[pit!|fell in a pit]]<<onmousein>><<goto 'fell in a pit'>><</mouseover>>
<<onmouseover>>
<<onmouseover>>
See documentation for <<mouseover>>.
<<onhover>>
<<onhover>>
See documentation for <<mouseover>>.
<<onmousein>>
<<onmousein>>
See documentation for <<mouseover>>.
<<onmouseenter>>
<<onmouseenter>>
See documentation for <<mouseover>>.
<<onmouseout>>
<<onmouseout>>
See documentation for <<mouseover>>.
Usage notes
⚠️ Attention :
Using mouse-specific events for major gameplay mecahnics will have a negative effect on accesiblity and on touch devices and mobile users. You'll need to weigh any benefits against this fairly major drawback when using this macro, or limit yourself to only using it in ways that are non-essential to the user experience.
Live demo
Demo Twee code:
:: Start
<<mouseover>>\
<<link 'Hover here!'>><</link>>\
<<onmousein>>
<<replace '#mouseovertooltip'>> Hover there!<</replace>>
<<onmouseout>>
<<replace '#mouseovertooltip'>><</replace>>
<</mouseover>>\
@@#mouseovertooltip;@@