Question

我是吉他手，不是编码员，但是我有一个吉他课程网站正在尝试升级。（对不起，如果我搞砸了下面的代码。）我有一个使用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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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>

Answer 1

对于“跨度”，您说的是绝对的，但未提供任何定位信息。在这种情况下，请添加“底部”：

   position: absolute;
   bottom: 0em;

它也没有相对关系，因此添加：

   .tooltipWrapper { position: relative; }

Answer 2

我建议您检查Tippy.js，它是一个很酷的工具提示和弹出库，它是高度可定制的。

Answer 3

一个叫做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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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>

工具提示的底部位置

3 个答案: