<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang=en>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<TITLE>favorite things</TITLE>
<META name="KEYWORDS" CONTENT="filk">
<style>
p {
text-indent:2em;
}
p.drop {
text-indent:0;
}
p.drop::first-letter {
font-size:2em;
text-indent:0;
}
a.l,div.l,span.l {
display:inline;
float:left;
width:15%;
position:absolute;
left:-20%;
}
a.r,div.r,span.r {
display:inline;
float:right;
width:15%;
position:absolute;
right:20%;
}
h1 {
text-align:center;
font-size:4em;
}
ul {
text-indent:4em;
}
<!--
img.l {
float:left;
width:999px;
max-width:15%;
position:absolute;
left:-20%;
}
img.r {
float:right;
width:15%;
position:absolute;
right:20%;
}
-->
img.v {
display:block;
margin:10% 10% 10% 10%;
width:100%;
}
/* Tooltip container */
.tooltip {
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -40px;
Min-width: 20em;
max-width: 70em;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.verse {
text-align: center; font-size: 2em; width:60%
}
</style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>
<div style="position:absolute; left:20%; width:60%; right:-20%;">
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/The_Silmarillion">
<img class=V src="../Images/Silmarillion.png"
alt="The Silmarillion">
</a>
<p class="drop verse">
<a href="https://en.wikipedia.org/wiki/Ungoliant">Gardening spiders</a>
<br>
<a class=R href="https://en.wikipedia.org/wiki/The_Fellowship_of_the_Ring">
<img class=V src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif"
alt="The Fellowship of the Ring">
</a>
And
<a href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">
swords that are broken
</a>
<br>
Words in the <a href="https://en.wikipedia.org/wiki/Black_Speech">Black Speech</a>
<br>
That must not be spoken
<br>
<a href="https://en.wikipedia.org/wiki/Denethor">Unfaithful stewards</a>
<br>
<a class=L href="https://en.wikipedia.org/wiki/The_Return_of_the_King">
<img class=V src="../Images/81UzbZbGPUL._SL1500_.jpg"
alt="The Return of the King">
</a>
Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[hook]
</p>
<p class="drop verse">
When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites,
<br>
<a class=L href="https://en.wikipedia.org/wiki/The_Currents_of_Space">
<img class=V src="../Images/Currents_of_space.jpg"
alt="The Currents of Space">
</a>
when the <a href="https://en.wikipedia.org/wiki/The_Currents_of_Space">probe</a> stings
<br>
When I'm feeling bad
<br>
I simply remember
<br>
My favorite <a href="https://en.wikipedia.org/wiki/Aragorn">kings</a>
<br>
And I don't feel so bad.
</p>
<div class=L>
<!--
<img class=V src="../Images/ASF_0224.jpg"
alt="Astounding Science Fiction vol. XLIII, no. 5, July 1949">
<img class=V src="../Images/ANLGOCT67.jpg"
Alt="<i>Analog vol. 80,no 2, October 1967">
-->
</div>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/Agent_of_Vega">
<img class=V src="../Images/Agent_of_vega.jpg"
Alt="<i>Agent of Vega</i> front cover">
</a>
<p class="drop verse">
Peddlers who drive their
<br>
Mysterious wagons
<br>
<a class=R href="https://en.wikipedia.org/wiki/Dragonflight">
<img class=V src="../Images/AnneMcCaffrey_Dragonflight.jpg"
Alt="<i>Dragonflight</i> front cover">
</a>
Petite young ladies
<br>
Who can speak to dragons
<br>
Travelling the Cosmos
<br>
In a
<a href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">ship who sings</a>
<span class=L>
<img class=V src="../Images/THSHPWHSNG681969.jpg"
alt="The Ship Who Sang front cover">
</span>
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<p class="drop verse">
<a class=tooltip href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
<span class=tooltiptext>
‘—All You Zombies—’ from The Magazine of Fantasy & Science Fiction, March 1959
</span>
</a>
<br>
<span class="L tooltip">
<img class=V src="../Images/FSFMar1959.jpg"
alt="The Magazine of Fantasy & Science Fiction, March 1959">
<span class=tooltiptext>
The Magazine of Fantasy & Science Fiction, March 1959
</span>
</span>
Who are like no others
<br>
Who are their own fathers
<br>
And are their own mothers
<br>
<a class=R href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">
<img class=V src="../Images/Heinlein-face.jpg"
alt="Robert Anson Heinlein, Grand Master of SF">
</a>
Of all such stories
<br>
Know <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein's</a> are kings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/Lord_Darcy_(character)">
<img class=V src="../Images/0743435486-med.jpg"
alt="Lord Darcy">
</a>
<p class="drop verse">
A <a href="https://en.wikipedia.org/wiki/Lord_Darcy_(character)">ducal detective</a> whose
<br>
Aide does the magic
<br>
Finds that their cases
<br>
Are often quite tragic
<br>
I hope that more stories
<br>
still lurk in the wings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<div class=L>
<!--
<img class=V src="../Images/md7993587667.jpg"
alt="Analog vol. 75, no. 5, July 1965">
-->
</div>
<p class="drop verse">
Oversized lizards
<br>
With partners named David
<br>
Who trade with sophonts
<br>
who sometimes are rabid
<br>
Finding new planets
<br>
With glorious rings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<div class=L>
<!--
<img class=V src="../Images/tn_ASF_0408.jpg"
alt="Analog, November 1964">
-->
</div>
<a class=L href="https://en.wikipedia.org/wiki/Lord_Kalvan_of_Otherwhen">
<img class=V src="../Images/LordKalvanOfOtherwhen.jpg"
alt="Lord Kalvan of Otherwhen">
</a>
<p class="drop verse">
<a href="https://en.wikipedia.org/wiki/Kalvan_(Calvin_Morrison)">Calvin</a> who knows his
<br>
Military history
<br>
Runs afoul of the great
<br>
<a href="https://en.wikipedia.org/wiki/Paratime_series">Paratime</a> mystery
<br>
The hand of a lovely
<br>
Young princess it brings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<p class="drop verse">
Peasants are fleeing
<br>
'Till Kalvan take over
<br>
They win the fight but he's
<br>
Shot by his lover
<br>
A chance to win glory
<br>
And power it brings
<br>
These are a few of
<br>
My favorite things.
</p>
<br>
<p>
[Verse]
</p>
<p class="drop verse">
Some yell in terror
<br>
But he can yell louder
<br>
He teaches Prince
<a href="https://en.wikipedia.org/wiki/Minor_Characters_in_the_Kalvan_series#Prince_Ptosphes">
Ptosphes
</a>
<br>
How to make gunpowder
<br>
To the priests of Styphon
<br>
A gauntlet he flings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<div class=L>
<!--
<img class=V src="../Images/ASF_0420.jpg"
alt="Analog, November 1965">
-->
</div>
<p class="drop verse">
<a href="https://en.wikipedia.org/wiki/Lord_Kalvan_of_Otherwhen">
They thought they were lost but
</a>
<br>
Their <a href="https://en.wikipedia.org/wiki/Lord_Kalvan_of_Otherwhen">hopes</a> he's igniting
<br>
Yet he can't keep Rylla his
<br>
Love from the fighting
<br>
He is a rival
<br>
To all the <a href="https://en.wikipedia.org/wiki/Minor_Characters_in_the_Kalvan_series#Great_King_Kaiphranos">great kings</a>
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/A_Wizard_in_Rhyme">
<img class=V src="../Images/f200aeb40ef0df1c56b4f1ea9ebdb178.jpg"
alt="Her Majesty's Wizard">
</a>
<p class="drop verse">
Untenured scholars
<br>
Who feel they're in Hades
<br>
Rescue from prison
<br>
Deposed royal ladies
<br>
Summoning dragons
<br>
With tears in their wings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/A_Beautiful_Friendship_%28novel%29">
<img class=V src="../Images/0671319752-lg.jpg"
alt="A Beautiful Friendship">
</a>
<a class=R href="https://en.wikipedia.org/wiki/The_Honor_of_the_Queen">
<img class=V src="../Images/TheHonorOfTheQueen.jpg"
alt="The Honor of The Queen">
</a>
<p class="drop verse">
Small gentle <a href="https://en.wikipedia.org/wiki/A_Beautiful_Friendship_(novel)">treecats</a>
<br>
<a href="https://en.wikipedia.org/wiki/List_of_characters_in_the_Honorverse#Winton-Henke,_Anson_to_Wright">
With friends that are royal
</a>
<br>
Humans with treecats
<br>
To whom they are loyal
<br>
Mess with their two legs
<br>
<a href="https://en.wikipedia.org/wiki/The_Honor_of_the_Queen">
And see what that brings
</a>
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/Shards_of_Honor">
<img class=V src="../Images/9781625793980-med.jpg"
alt="Shards of Honor">
</a>
<p class="drop verse">
<a href="https://en.wikipedia.org/wiki/Shards_of_Honor">
Betan survey ships
</a>
<br>
Whose captains are taken
<br>
Vorbarran warships
<br>
That with strife are shaken
<br>
Mess with <a href="https://vorkosigan.fandom.com/wiki/Cordelia_Naismith_Vorkosigan">
Cordellia
</a>
<br>
A slit throat she brings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/Barrayar">
<img class=V src="../Images/9781625793959-lg.jpg"
alt="Barrayar">
</a>
<p class="drop verse">
<a href="https://en.wikipedia.org/wiki/Barrayar">Stealing</a> the
<a href="https://en.wikipedia.org/wiki/Miles_Vorkosigan">
son
</a>
of
<br>
A
<a href="https://vorkosigan.fandom.com/wiki/Cordelia_Naismith_Vorkosigan">
helpless Vor Lady
</a>
<br>
Who has an
<a href="https://vorkosigan.fandom.com/wiki/Konstantine_Bothari">
armsman
</a>
<br>
Who is rather shady
<br>
<a href="https://vorkosigan.fandom.com/wiki/Vidal_Vordarian">
Losing your head
</a>
is
<br>
The fate that it brings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/Patricia_Wrede#Magic_and_Malice">
<img class=V src="../Images/Mairelon_the_Magician_.jpg"
alt="Mairelon the Magician">
</a>
<p class="drop verse">
Thieves dressed as boys
<br>
Who are caught and coopted
<br>
Help solve a case
<br>
And wind up adopted
<br>
Hide behind the table
<br>
When a foe magic flings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/Patricia_Wrede#Magic_and_Malice">
<img class=V src="../Images/169885._SY475_.jpg"
alt="Magician's Ward">
</a>
<p class="drop verse">
Students of magic
<br>
Weighed down by their reading
<br>
Who their decorum
<br>
Not always are heeding
<br>
Rescue their teacher
<br>
And get wedding rings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/A_Civil_Campaign">
<img class=V src="../Images/0671578855-lg.jpg"
alt="A Civil Campaign">
</a>
<p class="drop verse">
<a href="https://en.wikipedia.org/wiki/A_Civil_Campaign">Bungled proposals</a> can
<br>
Sometimes be tricky
<br>
You'll face his <a href="https://vorkosigan.fandom.com/wiki/Ekaterin_Nile_Vorkosigan">mother</a>
<br>
When you mess with <a href="https://vorkosigan.fandom.com/wiki/Nikolai_Vorsoisson">Nikki</a>
<br>
She's a strong lady
<br>
Who knows a few things
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse]
</p>
<p class="drop verse">
Gullible inlaws
<br>
Want to take Nicholai
<br>
Emperor Gregor
<br>
Responds to his outcry
<br>
Meddlesome shavetails
<br>
The
<a href="https://en.wikipedia.org/wiki/List_of_Vorkosigan_Saga_characters#Barrayarans">
emperor
</a>
zings
<br>
These are a few of
<br>
My favorite things.
</p>
<br>
<p>
[Verse]
</p>
<a class=L href="https://en.wikipedia.org/wiki/Honorverse#Crown_of_Slaves_series">
<img class=V src="../Images/0671319752-med.jpg"
alt="Changer of Worlds: From the Highlands">
</a>
<p class="drop verse">
<a href="https://en.wikipedia.org/wiki/List_of_characters_in_the_Honorverse#X,_Isaac_to_X,_Jeremy">Audobon dancers</a> who
<br>
Will not be chattels
<br>
Have strange bedfellows
<br>
To help with their battles
<br>
With secret agents
<br>
They sometimes have flings
<br>
These are a few of
<br>
My favorite things.
</p>
</div>
</BODY>
</HTML>I want to display a text balloon when the cursor is over certain images and text, I found some mouseover CSS on the web, and modified it for my purposes, My CSS does what I want when I move the cursor over text and images inside DIV and SPAN elements, but not for hyperlinks in an A tag. It does, however work for an A tag inside a SPAN with CLASS=TOOLTIP
<style>
p {
text-indent:2em;
}
p.drop {
text-indent:0;
}
p.drop::first-letter {
font-size:2em;
text-indent:0;
}
a.l,div.l,span.l {
display:inline;
float:left;
width:15%;
position:absolute;
left:-20%;
}
a.r,div.r,span.r {
display:inline;
float:right;
width:15%;
position:absolute;
right:20%;
}
h1 {
text-align:center;
font-size:4em;
}
ul {
text-indent:4em;
}
<!--
img.l {
float:left;
width:999px;
max-width:15%;
position:absolute;
left:-20%;
}
img.r {
float:right;
width:15%;
position:absolute;
right:20%;
}
-->
img.v {
display:block;
margin:10% 10% 10% 10%;
width:100%;
}
/* Tooltip container */
.tooltip {
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -40px;
Min-width: 20em;
max-width: 70em;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.verse {
text-align: center; font-size: 2em; width:60%
}
</style>
<p class="drop verse">
<a class=tooltip href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
<span class=tooltiptext>
‘—All You Zombies—’ from The Magazine of Fantasy & Science Fiction, March 1959
</span>
</a>
<br>
<span class="L tooltip">
<img class=V src="../Images/FSFMar1959.jpg"
alt="The Magazine of Fantasy & Science Fiction, March 1959">
<span class=tooltiptext>
The Magazine of Fantasy & Science Fiction, March 1959
</span>
</span>
Who are like no others
<br>
Who are their own fathers
<br>
And are their own mothers
<br>
<a class=R href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">
<img class=V src="../Images/Heinlein-face.jpg"
alt="Robert Anson Heinlein, Grand Master of SF">
</a>
Of all such stories
<br>
Know <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein's</a> are kings
<br>
These are a few of
<br>
My favorite things.
</p>
I got the tooltip for the image, but not for the text "Time traveling bar men".
Changing tooltptext to display:sticky; let me get the tooltip, but introduced extraneous blank lines and border.
2
Answers
It looks like the problem is due to HTML's scope rules. The solution was to remove the positioning information from <div>, add it to the style for <p>, with display:relative, and move every tag with class=tooltip inside a <p></p>.
The main issue is an the positioning of your
.tooltiptext:Especially
bottom: 125%;which makes it leave the screen.