当我将鼠标悬停在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