Issues with mouseover: and mouseout:

Dantesque

Hi there,

I'd like it to be so that when the player hovers the mouse over a certain hook, a short description appears besides the text, only to disappear when the mouse goes away. I've been trying to do this using the mouseover: and mouseout: functions, and it does work...but only once for each action. The text appears once when I hover the mouse over the hook, it disappears when I move the mouse away from the hook, but it never reappears again when I move the mouse over the text again. Is there any clever way to make these actions loop so that they don't just work only once?

I hope I made myself clear enough.

greyelf

Tooltips like this can be done using some CSS trickery. (based on this article)

If you use a <span> within your hook text to define the text you want your tooltip to display:


|clickme>[This text is displayed in the hook.<span class="tooltip">This text will appear in the tooltip</span>]


You can use some CSS to hide the tooltip text until the mouse cursor is over the hook text like so:


tw-hook span.tooltip {
z-index:10;
display: none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:300px;
line-height:16px;
}
tw-hook:hover span.tooltip {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
}


The part of the CSS doing the hiding/showing is the display: none; & display:inline; properties. The other properties are related to how it looks and where it is shown, which you can change to suit yourself.