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 span绝对定位.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>

将工具提示绝对定位在相对文本上

1 个答案: