当我将鼠标悬停在div.divClass上时,应显示工具提示文本.
我怎样才能做到这一点？
.divClass {
width: 200px;
height: 200px;
border: 1px solid
}
<div class="divClass"> <a href="#" title="Tooltip text"> test </a> </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>
参考文献：
> title attribute~MDN
> Global attributes~MDN
