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

Question

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

我怎样才能做到这一点？

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

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

---

编辑

实际上，当鼠标悬停在 div 上时，我想在 ANCHOR 元素顶部显示工具提示。如果我在 Div 中添加标题意味着我遇到了对齐问题。

Answer 1

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