Work Text:
I think this is a Game Changer. (I had to)
Example:
"Я тебя люблюI love you Shane," Ilya said.
"I missed you, Мой малыш.my love."
"Come here, moye solnyshko.my sunshine."
If you do paragraph or block of text it will temporarily block the text above.
"Это значит, что теперь у меня никого нет. Ну... ну не совсем никого, у меня есть Светлана. Она меня любит. И я её люблю. не так, как... Чёрт. Не так, как я люблю тебя. Вот в чём вся хрень. Я хочу только тебя. И всегда только тебя. Я так сильно тебя люблю и не знаю, что с этим делать.""Now I have absolutely no one. Well, not exactly no one, I have Svetlana. She loves me. And I love her. But not like... Damn. Not like I love you. And that's the whole damn thing. I only want you. And always only you. I love you so much and I don't know what to do about it."
It's also screen reader friendly!
Tutorial
Step 1: Create the Work Skin
Go to your Dashboard -> Skins -> Work Skins.
Click Create Work Skin.
Give it a name (e.g., Hover_Translation).
Paste this exact code into the CSS box:
#workskin .dr-tooltip {
border-bottom: 1px dotted #900;
position: relative;
cursor: help;
display: inline-block;
}
#workskin .dr-tooltip .translation {
visibility: hidden;
position: absolute;
bottom: 125%;
left: 10%;
transform: translateX(-10%);
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 4px;
white-space: normal;
z-index: 1;
}
#workskin .dr-tooltip:hover .translation {
visibility: visible;
}
Click Submit.
Step 2: Apply the Skin to your Fic
In the Post New or Edit page of your story, scroll down to Associations.
Find the Select Work Skin dropdown and choose the name of the skin you just created.
Step 3: Add the HTML to your Text
When writing your story, switch from the "Rich Text" editor to the HTML editor and use this format:
<span class="dr-tooltip">WORD<span class="translation"> ENGLISH TRANSLATION</span></span>
Example:
<span class="dr-tooltip">Мой малыш<span class="translation">my baby</span></span>
Notes for Readers
Desktop: Hover your mouse over the underlined word to see the translation.
Mobile: Tap the underlined word to see the translation.
Settings: This only works if "Hide Creator's Style" is not checked in your preferences.