Show data-attribute class from other class hovering

Question

I´m using the following tooltip hint from this SO post.

.content {
  display: flex;
  flex-direction: column;
}

.area1 {
  background-color: red;
  height: 20px;
  width: 20px;
}

.area2 {
  background-color: orange;
  height: 20px;
  width: 20px;
}

.area3 {
  background-color: violet;
  height: 20px;
  width: 20px;
}

[tooltip]:before {
  position: absolute;
  content: attr(tooltip);
  opacity: 0;
}

[tooltip]:hover:before {
  opacity: 1;
}

<div class='content'>
  <div class='area1' tooltip='this is area 1'>
  </div>
  <div class='area2' tooltip='this is area 2'>
  </div>
  <div class='area3' tooltip='this is area 3'>
  </div>
</div>

I need to show the tooltip only when hovering the area, not when hovering the tooltip (as shown).

I´ve tried:

.area1:hover [tooltip] {
    opacity: 1;
}

and

.area1:hover [tooltip]:before {
    opacity: 1;
}

Both cases I had no success.

Your implementation similar to this one - see if you can figure out the difference https://www.w3schools.com/css/css_tooltip.asp — mike123, Nov 17 '17 at 16:18
Could you please point me where in the rules or meta says such a thing, @acoder? I know sometimes people answer in comments but IMHO a real answer (even more an accepted one) marks the question as completed so it's more useful to others. — Jordi Nebot, Nov 17 '17 at 16:32
In fact, @acoder, if you check the section **When *shouldn't* I comment?** in [Comment Privileges](https://stackoverflow.com/help/privileges/comment) you'll see that, on the contrary, answering in comments isn't a good practice. And it says nothing about the complexity of the answer. — Jordi Nebot, Nov 17 '17 at 16:56
Thanks- Same to you. Please check my this answer what's people said https://stackoverflow.com/questions/47208046/toggle-the-div-when-link-is-cliked/47208561#47208561 — acoder, Nov 17 '17 at 16:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159252/discussion-between-jordi-nebot-and-acoder). — Jordi Nebot, Nov 17 '17 at 17:03

score 1 · Accepted Answer · answered Nov 17 '17 at 16:14

Use pointer-events: none on [tooltip]::before. It does exactly what it seems:

.content {
  display: flex;
  flex-direction: column;
}

.area {
  width: 20px;
  height: 20px;
}

#area1 { background-color: red; }
#area2 { background-color: orange; }
#area3 { background-color: violet; }

[tooltip]::before {
  position: absolute;
  content: attr(tooltip);
  opacity: 0;
  pointer-events: none;
}

[tooltip]:hover::before {
  opacity: 1;
}

<div class="content">
  <div id="area1" class="area" tooltip="this is area 1"></div>
  <div id="area2" class="area" tooltip="this is area 2"></div>
  <div id="area3" class="area" tooltip="this is area 3"></div>
</div>

Show data-attribute class from other class hovering

1 Answers1