html – 指定悬停在元素上时工具提示的位置

前端之家收集整理的这篇文章主要介绍了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

原文链接:https://www.f2er.com/html/242630.html

猜你在找的HTML相关文章