Developer_29 Developer_29 - 4 months ago 9
CSS Question

Show tooltip when hovering over container of <a> tag

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

The HTML title attribute is a global attribute, which means it can be used on all HTML elements.

.divClass {
  width: 200px;
  height: 200px;
  border: 1px solid
}
<div class="divClass" title="Tooltip text">
  <a href="#"> test </a>
</div>

References:


Update, based on revised question:

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 another 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