Archive of Our Own ^beta

Workskin CSS:

#workskin .tooltip {
  position: relative;
  display: inline-block;
}

#workskin .tooltip .tooltiptext {
  visibility: hidden;
  background-color: #111;
  color: #ffffcc;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  top: 105%;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  display: block;
  max-width: 40em;
  white-space: normal;
  box-shadow: 0 0 15px 5px rgba(255, 255, 150, 0.6);
  z-index: 99999;
}

#workskin .tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #111 transparent;
}

#workskin .tooltip:hover .tooltiptext,
#workskin .tooltip input[type="checkbox"]:checked + .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#workskin a {
  opacity: 0.5;
  text-decoration: none;
  border-bottom: none;
}

#workskin .tooltip:hover .tooltiptext,
#workskin .tooltip input[type="checkbox"]:checked + .tooltiptext {
  visibility: visible;
  opacity: 1;
  z-index: 100000;
}

#workskin .tooltip input[type="checkbox"] {
  display: none;
}

#workskin summary::marker {
  content: "";
}

#workskin summary::-webkit-details-marker {
  display: none;
}

#workskin summary,
#workskin details[open] summary {
  font-style: normal;
  opacity: 1;
  margin: 0;
  padding: 0;
  display: inline;
}

#workskin details {
  font-style: italic;
  margin: 0;
  padding: 0;
  display: inline;
}

#workskin details p,
#workskin details ul {
  opacity: 0.5;
}

WORKING:

Hover Only Code (To make a tooltip, use the following code in the "HTML" work text field NOT rich text):

<span class="tooltip">Word(s) to Translate<span class="tooltiptext"> (Translation:) </span></span>

Working Example (hover over the following text to see the tooltip):

Word(s) to Translate (Translation:)

It even works with large swaths of text!

Lorem ipsum dolor sit amet, consectetur adipiscing elit... (Translation: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.)

Notes:

I recommend enclosing your translation in (Parentheses) and including a space both before and after the parentheses to ensure readability if the work skin is turned off (this tip was inspired by Ao3 user Simbeline who also came up with a tooltip translation work skin)

This does already allow a pseudo-toggle functionality for mobile devices it seems. So that's handy! That does not unfortunately work the same on PC from what I can tell, which only reacts to a mouse hovering over.

Known issues with the Hover Code:

• If the text in question to be translated is too short and/or sits too close to the margin of the work, the box/text of the "Translation" may get cut off or squished.
  • Example: Cut off... (This text may be too long and might get cut off or squished)
    • Cut off Solved!: By making the tooltip a floating flex display, it now tries to center itself within the bounds of the text width.
    • Squished: This still happens if the text you are translating is short. Please see the following "ALT solution" for how to solve that!
  • ALT Solution: Wrap the whole sentence/paragraph with the hover code not just the single word/short text. This allows the tooltip box to stretch the same width as the sentence/paragraph and moves it out of the way so you can see both the context AND translation at the same time.
    • Example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. (Translation: Lorem Ipsum is simply dummy text of the printing and typesetting industry.)

HOW TO MAKE A CODE GENERATOR USING GOOGLE SHEETS (OR MS EXCEL):

Maybe you are like me, and hate the tedium of manually editing each thing you need to translate. So I thought I'd share my solution that helps making coding lots of translations easy!

1. Start with a new Google Sheet (or MS Excel sheet)
2. Set it up as the following:
   1. Column A will be the "Word(s) To Translate" (The text show by default)
   2. Column B will be the "Translation" (The text to be revealed in the tooltip)
   3. Column C will be the formula that will generate the code for you.
      1. (NOTE: Mentioned above, I recommended you should enclose your translation in parentheses and surround it with spaces to ensure it will display legibly even if your workskin is turned off. The formula in Column C includes this formatting feature automatically and it does NOT need to be included in Column B's translation.)

Now if you copy the code value in Column C using Ctrl(cmd)+C, and paste it using Ctrl(cmd)+Shift+V, it will give you the HTML code for you to paste in your work like so:

• <span class="tooltip">Word(s) to Translate<span class="tooltiptext"> (Translation:) </span></span>

For your convenience, I have made a Google Sheets Template with this exact functionality which you can make a copy for yourself. This really speeds up workflow in my opinion. Hope it helps!

• Tooltip and Footnote Code Builder Template - By Astaria Everlasting

WORK IN PROGRESS (NOT WORKING):

Hover & Toggle Code:

<label class="tooltip">
  Word(s) to Translate<input type="checkbox">
  <span class="tooltiptext">Translation:</span>
</label>

Working Example (It's broken ☹️):

Word(s) to Translate (Translation:)

Known issues with the Toggle Code:

• It appears that Ao3 does not allow "label" and "input" HTML which is what allows the toggle feature of this work skin to operate. I am currently looking for an alternative.

Alternative: Details And Summaries (Work In Progress)

Using the following code, you can have a "collapsible" section of text, which can be revealed on click:

<details>

<summary>[Insert your text here to make it visible by default]</summary>

<p>[Insert your text here which will be revealed on click]</p>

</details>

Demo:

Here is words before the text to be translated.

"Word to be translated." 

"Translation." 

Words after translation.

Known issues:

• Currently inserts the details as a new paragraph regardless of if I remove <P> or not from the HTML code. This is Ao3 correcting the code automatically to reinsert <P>.
  • Work around: You can encapsulate the whole paragraph of what you are writing in "Summary", then add the translation after that paragraph.
  • Example:

Here is a demo paragraph of information or prose. If I needed to translate this word here: Testing... I could put all this text here of the paragraph, the include the translation after it, to reveal the translation (click to reveal) If you include a little arrow like this at the end of the paragraph it can indicate to your readers to click:↴ 

(Let's make this extra long... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.)

• Testing with a list item as well!

And here is some text for after the revealed definition to test how it appears.