Question

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

我怎样才能做到这一点？

＆＃13;

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

＆＃13;

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

＆＃13;

修改

实际上我想在鼠标悬停在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

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

1 个答案:

jsFiddle