#hover text

So this is probably old news to everyone else, but I just learned how to do hovertext on AO3!! You know, since it’s annoying to have to either go find your own translation on google or (in the case of alien languages) wait for the end where the author notes can translate. 

The code, if you’re interested, is:

<span title="text to display on hover">original text</span>

I just tested it on my old story “Fighting Words,” so here’s an example: at one point I had Leia snarl the Mandalorian curse “Nim gar troac varbeck” which translates to (in a mash of canon and my headcanon) “may your genitals revolt.” Which I also displayed in italics. So the HTML is:

<span title=“may your genitals revolt”> <em>”Nim gar troac varbeck.”</em></span>

So now when you hover your mouse over the Mando’a curse, you can see what it means! (I understand it does not work for people reading in mobile, but I have not tested this yet myself.)

I’ve been asked about how to do this a few times, so here’s my quick & dirty tutorial on hover text.

Create a post. Make sure it is DONE and ready to post Add icons, do your formatting, etc. THEN select/highlight the text you want to make hover:

add a “link” wherever you want your hover text to be. Type in your hover:

Hit “Done”

Now find the settings icon and switch your post type to HTML:

somewhere in that mess of code, you’ll see a value “href” and your link text. 

Delete that and replace it with “title”  DO NOT DELETE THE =

now preview/post:

8 Simple Tips for better Communication with Customer-Facing Teams

Businesses often maintain documentation as part of their product. You might be thinking of help center articles, hover text, and little anthropomorphic paper clips. But, the end user is not the only one who benefits from guidance around a product’s intended use. Customer-facing teams, like sales and customer support, also need thorough product communications. Enabling […]

The post 8 Simple Tips…