Hover Notes - Blog Posts

Hover Notes or ‘Floating Boxes’in Ao3

This is a fun option if you use, for example, phrases in other languages in your story. I often do, and this is a nice way to give translations without having to scroll to the end of the text, or putting them in the starting notes where people have to keep checking back – or where they spoiler the story!

HOWEVER. The drawback is that the floating boxes only work when a ‘mouse’ is ‘hovered’ over the marked text. They do NOT show up on tablet or phone screens, so you’ll still need to put a list of translations in the notes for readers using those devices.

Let’s have an example. 

“Qu’est ce que tu veux?”

Now if you speak French, you might know that means “What do you want?”

But not all of your readers will know that. So, you offer them a translation. And since the boxes don’t appear unless you hover directly above them, I usually add a Beginning Note to the chapter that reads something like this;

‘Hover over italicised foreign language text for translations! (Mobile and tablet users please see the Ending Notes)’

In HTML mode in Ao3, (if you try this in Rich Text mode you will get a horrible mess so don’t) the line with this example would appear as:

<p>“<em>Qu’est ce que tu veux?</em>”</p>

To add the floating box with the translation, you would select the words to be translated (that is, Qu’est ce que tu veux?) and paste in the following HTML.

<span title=“What do you want?”>Qu’est ce que tu veux?</span>

The whole line will now read:

<p>“<em> <span title=“What do you want?”>Qu’est ce que tu veux?</span> </em>”</p>

Review your work, hover over the part that requires translating, and you should see the following:

And you’re done!

I tend to set up a Word doc with all the <span> lines I want to use created in it, and then when the time comes, just copy/paste them into Ao3. Saves lots of time!