Actions

Work Header

AO3 Mouseover/Hovertext Tutorial

Work Text:

First things first:

Go in to edit your document, and switch from Rich Text Mode, to HTML mode (buttons are at the top of the text entry area). If, for some reason, your hovertext is not showing up correctly, 9 times out of 10, it'll be because you were in the wrong mode.

When testing it out, please wait a second or two for the hovertext to show up.



To show the hover/mouseover text over normal-looking text:

This is the text I want to have a mouseover

do this:
<span title="Mouseover text goes here">This is the text I want to have a mouseover</span>



To have a little dotted line underneath and a ? come up to indicate that hover/mouseover text is available:

This is the text I want to have a mouseover

do this:
<abbr title="Mouseover text goes here">This is the text I want to have a mouseover</abbr>



To have it show up looking like a link, but one that doesn't go anywhere:

This is the text I want to have a mouseover

do this:
<a title="Mouseover text goes here">This is the text I want to have a mouseover</a>