#hovertext

Work Skins:

The very first thing you should do is prepare your Work Skin. There's a very helpful article on AO3 that describes how to make a work skin here. Please use the instructions there to make a Work Skin; I named mine "Workskin for Mando" because this doesn't really matter.

In your Work Skin, you'll want to put (or add) the following CSS:

#workskin .chapter { overflow-x: hidden !important; } #workskin .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } #workskin .tooltip .tooltiptext { visibility: hidden; width: max-content; max-width: 300px; margin-left: -50%; background-color: #ffffff; color: #000000; text-align: center; padding: 5px 10px; border-radius: 5px; position: absolute; z-index: 99999; bottom: 100%; left: 50%; overflow-wrap: break-word; box-shadow: 1px 1px 2px 0px #c8c8c8; } #workskin .tooltip:hover .tooltiptext { visibility: visible; }

Save it. You're done with that for now.

I read several tutorials and used my own vague knowledge of CSS to make this Work Skin, listed below are the ones that I found particularly useful:

Making a variable-width tooltip for mobile and desktop (This gave me 95% of the CSS above)

Desktop/mobile-friendly short tooltips work skin

How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)

Please go check those out if my specific brand of hovertext doesn't appeal to you, or if you want to know more about why any of the above CSS does what it does!

Writing the Fic:

This method works best, as I said, if you write your translations into the work as you go, or put them in as you edit. Again, for the purposes of this tutorial, I will be using:

$text ((translation))

Here is a paragraph with some examples:

He lunged with both blades forward, a reckless attack, easily blocked, and watched as the $jetii’kad ((lightsaber)) locked against first his main knife and then the new, stolen one, and then abruptly screamed out as the plasma extinguished.

Jango couldn’t follow the advantage immediately because… cortosis? Cortosis? The $jetii ((Jedi)) had fought someone equipped to battle him, someone from the $aliit ((family)) of Jango’s $buir ((parent)), and won, and stolen their knife, and…

The $Jetii ((Jedi)) had discarded the useless hilt of his $kad’au ((Lightsaber)) and launched himself at Jango, shouting his name.

Of course you can pick anything you like for yours, as long as it's not something that will show up anywhere else in the fic so you don't get false positives when we replace it later.

It's a weird habit to get into, but trust me when I say that you're going to save time overall.

Processing the Fic:

Get an HTML version of your fic:

In order to get the CSS for the hovertext embedded you'll likely want to convert your fic into HTML first. This is largely because I don't trust WYSIWIG editors generally, but also partly because the AO3 Rich Text editor introduces uncertainty when saving the CSS and I've seen it choke on it and mess things up.

This is complicated, however. If you don't like complicated, there's good news: you probably don't need to do this. You likely can do most of my method with your current word processor of choice! Feel free to scroll straight down to Now Find + Replace for the details!

Methods I have tried in the past to extract HTML from rich text include the Google Docs AO3 plugin, as well as just pasting my rich text to the AO3 Rich Text editor and clicking the tab to switch to HTML.

Now, however, I write in Markdown: I use a variety of editors to write, and I'm OS agnostic and use multiple devices daily, so Markdown works best for me. Therefore I convert my Markdown file in Obsidian using the Copy as HTML plugin.

Ellipsus’s “Export to AO3” feature will also convert to HTML, but I have not personally used it.

Now Find + Replace:

For this method to work, you'll break apart the CSS into the before, between, and after bits. So you'd do three Find and Replaces total:

$ replaced by <span class="tooltip"> (( replaced by <span class="tooltiptext">( )) replaced by ) </span> </span>

Just use the Find and Replace feature on your word processor of choice (this can even be regular windows Notepad, it doesn’t matter), and replace each chunk of your special symbols with the corresponding CSS as listed above.

If your Find + Replace tells you how many times something is being replaced, keep an eye on that to make sure you are getting all the code snippets fully embedded. I personally often forget the second close paren and have to do a bit of search and rescue in longer works.

Posting:

Copy the contents of <body> (or just all of the HTML if your HTML conversion method didn't give you a <body>) and paste it into the HTML tab of the AO3 editor.

Make sure to select your work skin! This option is in the "Associations" section of the posting form, right beneath "Choose a language".

Preview. Check for weirdness. Hover your pointer over the translations. Feel glee. Post.

Conclusion:

Before I designed this method it took me about 10 minutes per 1k words to hovertext my Mando'a. I hated it. It made me not want to write fic with translations ever again. Now I just frontload the time (but not by much as I was already putting the translations in-line for complicated sentences/concepts), and it takes me a few minutes max to get it done.

I had an awesome commenter (the lovely @notquiteaghost) suggest a CSS script, since the initial hover text translations I used didn't work on mobile.

Here's the link to the instructions: https://archiveofourown.org/works/30290274

Fair warning, it took me a little bit to get the hang of it. If you're like me and need a little hand-holding, here's how I implement the script:

Copy the code from the CSS section into a new work skin (or the one you're currently using)

Save that skin and make sure to enable it in the work you're going to implement hover text on

Open up your chapter or fic and switch to "HTML" instead of "Rich Text"

When you find the word or phrase you want to have hover text, paste this:

Next, replace the Text to hover over section with whatever your original word or phrase was -- this is the only place that word should appear, and it should still have whatever punctuation you need in it

Replace the text for the tooltip section with whatever your translation or hover text is

Finally, triple check that there's a space between the final section and the rest of your sentence or paragraph. If there isn't a space, sometimes the script pushes the translation onto the next word or shoves them together and italicizes them

Here's what this looks like in my HTML view:

Here's what that looks like in my rich text view:

and here's what the final product looks like:

You should be able to hover over those underlined sections on mobile or desktop and see the translation you inputted. If you don't see it, there might be an issue with how you set up the individual tooltip, or the workskin itself.

My other tips for using this:

Keep a copy of the basic HTML tooltip script to copy and paste into your work as you edit it

Test your hover text in draft view on ao3. You should be able to see it.

Using italics can make the HTML part a little bit harder but it's not impossible

Keep an eye out for your punctuation! Sometimes the formatting can throw your commas and periods around without warning

Try to keep any translations or comments to one sentence max, otherwise the hover text bubble can be cut off in mobile view or stretch the view strangely

If you're translating many words (like I am in my current fic) it's easier to copy and paste a HTML tooltip that's complete but shorter so it doesn't throw off every single line (like copying a one-word translation instead of the original tooltip template)

Hope this helps! I really love using this for my fics and I'm so grateful to @notquiteaghost and everyone else in my comments who offered solutions for my hover text issues.