⚠️ JavaScript is required for live preview. Here's the code:
<style>
/* Styling for the passage container */
.latin-passage {
font-family: 'Georgia', serif;
font-size: 20px;
line-height: 2.2;
color: #333;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
border: 1px solid #ddd;
}
/* Styling for the interactive words */
.latin-word {
position: relative;
display: inline-block;
cursor: help;
border-bottom: 2px dotted #0056b3; /* Dotted line to indicate interactivity */
color: #000;
transition: color 0.2s;
}
.latin-word:hover {
color: #0056b3;
}
/* The Tooltip (Hidden by default) */
.latin-word::after {
content: attr(data-meaning);
position: absolute;
bottom: 120%; /* Positions it above the word */
left: 50%;
transform: translateX(-50%);
background-color: #222;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-family: 'Arial', sans-serif;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
z-index: 10;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* The tiny triangle pointer on the tooltip */
.latin-word::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #222 transparent transparent transparent;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
z-index: 10;
}
/* Show tooltip on hover */
.latin-word:hover::after,
.latin-word:hover::before {
opacity: 1;
visibility: visible;
}
</style>
<div class="latin-passage">
<span class="latin-word" data-meaning="many">multi</span>
<span class="latin-word" data-meaning="friends">amici</span>
<span class="latin-word" data-meaning="with">cum</span>
<span class="latin-word" data-meaning="Caecilius">Caecilio</span>
<span class="latin-word" data-meaning="were dining">cenabant</span>.
<span class="latin-word" data-meaning="Felix">Felix</span>
<span class="latin-word" data-meaning="also">quoque</span>
<span class="latin-word" data-meaning="was present">aderat</span>.
<span class="latin-word" data-meaning="all">omnes</span>
<span class="latin-word" data-meaning="friends">amici</span>
<span class="latin-word" data-meaning="the cook">coquum</span>
<span class="latin-word" data-meaning="praised">laudaverunt</span>,
<span class="latin-word" data-meaning="because">quod</span>
<span class="latin-word" data-meaning="the dinner">cena</span>
<span class="latin-word" data-meaning="was">erat</span>
<span class="latin-word" data-meaning="excellent">optima</span>.
</div>
