html - 将鼠标悬停在元素上时，指定工具提示的位置

当我将鼠标悬停在div.divClass上时，将显示工具提示文本。

我该如何实现？

.divClass {
  width: 200px;
  height: 200px;
  border: 1px solid
}

<div class="divClass">
  <a href="#" title="Tooltip text"> test </a>
</div>

编辑

实际上，当我将鼠标悬停在div上时，我想显示ANCHOR元素的工具提示顶部。如果我在Div中添加标题，则表示出现对齐问题。

最佳答案

不管悬停在何处，title属性都不能强制工具提示出现在一个固定位置。工具提示通常不是这样工作的。但是，这是一种可能对您有用的方法。

.divClass {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
  margin: 30px;
  cursor: pointer;
}

span { display: none; }

.divClass:hover > span {
  display: inline-block;
  position: absolute;
  top: -25px;
  left: 0;
  border: 2px solid red;
  background-color: yellow;
}
  

<div class="divClass">
  <a href="#"  title="Tooltip text"> test </a>
  <span>Tooltip text</span>
</div>

jsFiddle

引用:

title attribute〜MDN

Global attributes〜MDN