Specify the location of the tooltip when hovering over an element

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