小贝子编程

将工具提示文本附加到工具提示容器



我有一个带有tooltip和tooltiptext类的文档。当我定义或& lt; span>

使用class=tooltip时，工具提示文本将显示在包围的容器，而不是文本的正上方。

<!DOCTYPE HTML>
<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        {
left:20%;
position:relative;
right:-20%;
text-indent:2em;
width:60%;
}
p.drop   {
text-indent:2em;
}
p.drop::first-letter  {
font-size:2em;
text-indent:-2em;
}
a.L,div.L,span.L {
display:inline;
width:14%;
position:absolute;
left:-20%;
}
a.R,div.R,span.R {
display:inline;
width:14%;
position:absolute;
right:00%;
}

h1       {
text-align:center;
font-size:4em;
}

img.V    {
display:block;
margin:10% 10% 10% 10%;
max-width:90%;
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: 102%;
left: 10%;
margin-left: -40px;
Min-width: 20em;
max-width: 70em;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.L .tooltiptext {
left: 10%;
text-align: left;
}
.R  .tooltiptext {
left: -50%;
text-align: left;
}
/* Tooltip arrow */
/*
left: 15%;
*/
.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;
}
.L .tooltiptext::after {
left: 15%;
}
.R .tooltiptext::after {
left: 30%;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.verse     {
font-size: 2em;
text-align: center;
width:60%
}
</style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>
<p>
[Verse]
</p>
<p class="drop verse">
Gardening
<a class=tooltip href="https://en.wikipedia.org/wiki/Ungoliant">
spiders
<span class=tooltiptext>
Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor
</span>
</a>
<a class=L href="https://en.wikipedia.org/wiki/The_Silmarillion">
<img class=V src="../Images/Silmarillion.png"
alt="The Silmarillion">
</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 class=tooltip href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">
swords that are broken
<span class=tooltiptext>
Elendil&apos;s sword Narsil, called <q>The Sword that was Broken</q> after
its damage in a battle against Sauron, and later caried by
Aragorn (<q>Strider</q>).
</span>
</a>
<br>
Words in the
<a class=tooltip href="https://en.wikipedia.org/wiki/Black_Speech">
Black Speech
<span class=tooltiptext>
The Black Speech of Mordor is a language constructed by Sauron.
</span>
</a>
<br>
That must not be spoken
<br>
<a class=tooltip href="https://en.wikipedia.org/wiki/Denethor">
Unfaithful stewards
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
<br>
<a class="L tooltip" 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">
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>
</BODY>
</HTML>

第二个问题是箭头太宽

我试着让。tooltip display: inline-block，但是这会在渲染中引入多余的空格。

<!DOCTYPE HTML>
<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        {
left:20%;
position:relative;
right:-20%;
text-indent:2em;
width:60%;
}
p.drop   {
text-indent:2em;
}
p.drop::first-letter  {
font-size:2em;
text-indent:-2em;
}
a.L,div.L,span.L {
display:inline;
width:14%;
position:absolute;
left:-20%;
}
a.R,div.R,span.R {
display:inline;
width:14%;
position:absolute;
right:00%;
}

h1       {
text-align:center;
font-size:4em;
}

img.V    {
display:block;
margin:10% 10% 10% 10%;
max-width:90%;
width:100%;
}

/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
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: 102%;
left: 10%;
margin-left: -40px;
Min-width: 20em;
max-width: 70em;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.L .tooltiptext {
left: 10%;
text-align: left;
}
.R  .tooltiptext {
left: -50%;
text-align: left;
}
/* Tooltip arrow */
/*
left: 15%;
*/
.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;
}
.L .tooltiptext::after {
left: 15%;
}
.R .tooltiptext::after {
left: 30%;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.verse     {
font-size: 2em;
text-align: center;
width:60%
}
</style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>
<p>
[Verse]
</p>
<p class="drop verse">
Gardening
<a class=tooltip href="https://en.wikipedia.org/wiki/Ungoliant">
spiders
<span class=tooltiptext>
Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor
</span>
</a>
<a class=L href="https://en.wikipedia.org/wiki/The_Silmarillion">
<img class=V src="../Images/Silmarillion.png"
alt="The Silmarillion">
</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 class=tooltip href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">
swords that are broken
<span class=tooltiptext>
Elendil&apos;s sword Narsil, called <q>The Sword that was Broken</q> after
its damage in a battle against Sauron, and later caried by
Aragorn (<q>Strider</q>).
</span>
</a>
<br>
Words in the
<a class=tooltip href="https://en.wikipedia.org/wiki/Black_Speech">
Black Speech
<span class=tooltiptext>
The Black Speech of Mordor is a language constructed by Sauron.
</span>
</a>
<br>
That must not be spoken
<br>
<a class=tooltip href="https://en.wikipedia.org/wiki/Denethor">
Unfaithful stewards
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
<br>
<a class="L tooltip" 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">
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>
</BODY>
</HTML>

我不明白为什么，但似乎是text-indent触发了这个问题;将其改为margin-left解决了这个问题。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium