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

Question

When I mouse over div.divClass , the tooltip text should show.

How can I achieve that?

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

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

---

EDIT

Actually I want to show tooltip top of the ANCHOR element when mouse over on div. If I add title in Div means I'm getting alignment issue.

Answer 1

The title attribute cannot force a tooltip to appear in one fixed location, regardless of where the hover occurs. That's not normally how the tooltip works. However, here's a method that may work for you.

 .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

References:

• title attribute ~ MDN
• Global attributes ~ MDN