将工具提示绝对放置在相对文本上

Question

我在一个模板中包含了一些文本，我正在尝试添加工具提示以使用此代码：

<a  class="tooltip" href="#">Text<span>Tooltip pop-up text</span></a>  
<style type="text/css">
.tooltip {  border-bottom: 1px dotted #000000;  color: #000000; outline: none;  cursor: help; text-decoration: none;  position: relative;  }    
.tooltip span {  margin-left: -999em;  position: absolute;  }    
.tooltip:hover span {  font-family: Calibri, Tahoma, Geneva, sans-serif;  position: absolute;  left: 1em;  top: 2em;  z-index: 99;  margin-left: 0;  width: 250%;  }   
 </style>

但是，我遇到的问题是我无法在保持文本相对位置的同时在工具提示上实现绝对位置（它会扩展但在模板div 内）。

使用 .tooltip 跨度绝对定位 .tooltip 相对地在弹出窗口本身上实现了预期的效果，但显然会丢失链接在文本块中的定位。

有谁知道解决方案？

谢谢

Answer 1

试试这个：

a.tooltip { 
  color: #000000;
  outline: none; 
  cursor: help; 
  text-decoration: underline;
  display: block;
  text-align: center;
}
.tooltip > span {
  display: block;
  position: absolute;
  left: 50%;
}
.tooltip span span {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  z-index: 99;
  position: relative;
  top: 1em;
  left: -50%;
  white-space: nowrap;
  display: none;
}    
.tooltip:hover span span {
  display: inline-block;
}   

<a  class="tooltip" href="#">Text
  <span>
    <span>Tooltip pop-up text</span>
  </span>
</a>