我是一名吉他手,不是编码员,但我有一个吉他课程网站,我正在尝试升级。 (对不起,如果我搞砸了下面的代码。)我有一个使用HTML和CSS的工具提示定位问题。我想知道是否有人可以帮忙。如果你在这个页面上滚动它,你会看到我想要它做什么。 (它还需要在移动触摸屏上工作。)谢谢。 https://codepen.io/Daverino/pen/zboNoQ
.toolTipDiv {
float: none;
width: 275px;
margin-left: 20px;
}
.toolTipLink a {
display: block;
color: #202020;
background-color: transparent;
width: auto;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #878787;
line-height: 17px;
}
.toolTipLink a:hover {
background-color: #ddd;
color: #9B0E11;
padding-left: 10px;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 7px 10px;
margin-top: -80px;
/* this doesn't do anything:
margin-bottom: [any value]px;
*/
margin-left: 200px;
width: 140px;
line-height: 16px;
opacity: 0.85;
}
a.tooltip:hover span {
display: inline;
position: absolute;
color: #EEE;
background: #000;
}
<body>
<p> </p><p> </p><p> </p><p> </p>
<div class="toolTipDiv">
<span class="toolTipLink">
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
</div>
</a>
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
<span>The bottom of this tooltip is too low. It should be just above the line.</span>
</div>
</a>
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Here is a shorter line of text.</div>
<span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
</div>
</a>
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>This tooltip is way too high.</span>
</div>
</a>
</span>
</div>
</body>
对于“span”,你说它是绝对的,但没有提供任何定位信息。在这种情况下添加“底部”:
position: absolute;
bottom: 0em;
它也没有任何关系,所以补充:
.tooltipWrapper { position: relative; }
我建议你查看Tippy.js它是一个很酷的工具提示和弹出库,它是高度可定制的。
一个名为HTML CSS JAVASCRIPT的Facebook小组的人写了一个修复它的codepen。显然我搞砸了绝对和相对的定位。 https://codepen.io/jkarkosza/pen/WmopbP
.toolTipDiv {
float: none;
width: 275px;
margin-left: 20px;
}
.toolTipLink a {
display: block;
color: #202020;
background-color: transparent;
width: auto;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #878787;
line-height: 17px;
}
.toolTipLink a:hover {
background-color: #ddd;
color: #9B0E11;
padding-left: 10px;
}
a.tooltip {
position: relative;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 7px 10px;
position:absolute;
bottom: 100%;
color:#EEE;
background:#000;
/* margin-left: 200px; */
width: 140px;
line-height: 16px;
opacity: 0.85;
}
a.tooltip:hover span{
display:block;
}
<body>
<p> </p><p> </p><p> </p><p> </p>
<div class="toolTipDiv">
<span class="toolTipLink">
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
</div>
</a>
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
<span>The bottom of this tooltip is too low. It should be just above the line.</span>
</div>
</a>
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Here is a shorter line of text.</div>
<span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
</div>
</a>
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>This tooltip is way too high.</span>
</div>
</a>
</span>
</div>
</body>