hi! sorry if this has already been asked, but pretty please how did you do the super cool html for the pop-up boxes in discordant that let us read translations for the eridian stuff??
im forever in awe of your formatting for this fic with all the media stuff and i loved the translation boxes, they're such a good idea for eridian / english language barrier things (and also bloodymary language barrier, which i may be trying to write..) specifically how did you get the box to extend the screen Only when the relevant text is being hovered over, then revert back to a fixed position after? and not make the fic awkward to scroll through with it sliding to the extra space on the right unnecessarily?
sincerely, a humble ao3 writer who has no idea how html and coding works <3
Oh, of course! Okay, little HTML code crash course for pop-up text boxes (that work via hovering on pc and via tapping on mobile!)
So! You want to make a little textbox to help clarify details about certain words in your writing. Let's say you want to define a word for your audience. We can do that easily, like in the example below:
And hovering:
The code for this is, thankfully, relatively simple.
If you do not already, create a workskin that you can apply to your fic. Then, into that workskin, you are going to add the following css code (included as text below the 'read more' so you can just copy-paste from there):
For customization:
The underline beneath the word that can be hovered over is colored by 'border-bottom.' If you want to change the color, find the hexcode of the color that you want (just use google's color wheel) and replace #058fff with it.
The background of the textbox is determined by 'background-color' (currently #c5d2f0)
The gradient that I use is determined by 'background: linear-gradient.' The color the gradient starts as comes first (#bff0e3) and the one it ends as comes second (#cbb6fd)
The gradient will always overpower the plain background color, which I have in my code for redundancy. If you do not want a gradient and just want a solid background color, simply remove the gradient line of code.
The color of text within the textbox is determined by 'color' (currently #1e3a2f)
For a larger or smaller textbox, adjust 'width' (now 240px)
Once this is in your workskin, you can use it within your fic. This has to be done within the HTML editor of the fic, NOT the Rich Text editor.
Find the text that you want to be able to hover over and replace it with the following:
<span class="show">Hover This Word<span class="hide">This is the hidden text that pops up inside the box.</span></span>
Then insert the appropriate information (change 'Hover This Word' to the word you want showing, change the second part to what you want in the box).
Altogether in a paragraph within the HTML editor, it might look like this:
<p>This is regular text, but <span class="show">Hover This Word<span class="hide">This is the hidden text that pops up inside the box.</span></span> the rest of the sentence continues here.</p>
Keep in mind, I am not phenomenal at code. There are as many redundancies as I could manage within this, but occasionally there will be some cutoff at the edges of the page to ensure that there isn't overflow. Ao3 can't dynamically fix this because all screen sizes are different. However, this has all worked pretty well for me thus far.
I hope this is helpful, and that you are able to use it within your own fics! Let me know if you have any more questions as to how it works or how to use it, I would happy to answer to the best of my ability!
CSS Code for Workskin Below (for copy-pasting):
