CODEWITHSUNDEEP
htmlcss
Nick Reed
Nick Reed

Reputation: 5059

CSS "hover" menu being hidden by other hover-able text

I'm working on a popup that appears when the user hovers over text. A portion of text can be hovered over, which will make a small box appear below it containing additional text that's normally hidden.

The issue arises when there's another hover-able text portion where the box would display - the box is hidden behind it.

enter image description here

The Fiddle: CSS Issue

.hovertext {
  position: relative;
  display: inline-block;
  background: #CCEEFF;
  
  padding: 4px 6px;
  border-radius: 6px;
  
  z-index: 1;
}

.hovertext .hovertexttext {
  visibility: hidden;
  background: #AAAAEE;
  position: absolute;
  white-space: pre-line;
  
  padding: 4px 6px;
  border-radius: 6px;
  
  z-index: 2;
}

.hovertext:hover .hovertexttext {
  visibility: visible;
}
<!-- this often happens on tables, where "hover" spots are below one another -->
<table>
  <tr>
    <td>
      <div class="hovertext">
        hover here to see the issue
        <span class="hovertexttext">secret text!
        more secret text!
        even more secret text!
        but you can't see all of it...
        it's being blocked by the other element
        </span>
       </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="hovertext">
        i'm blocking the text aaaa
        <span class="hovertexttext">oh no</span>
       </div>
     </td>
  </tr>
</table>

I've tried:

The hover menu is overlapping its parent div without any issues, so I'm led to believe it could overlap another <div> that's the same class, but I'm more or less stuck with how to proceed. Did I overlook something obvious?

Upvotes: 1

Views: 921

Answers (1)

Chris W.
Chris W.

Reputation: 23280

You've got a few issues going on. Nested elements with conflicting indexes, display visible retains it's original sizing / nesting on the first measure arrange pass, and finally abusing box model semantic positioning. Hope this helps, cheers!

.hovertext {
  background: #CCEEFF;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: help;
}

.hovertexttext {
  display: none;
  background: #AAAAEE;
  position: absolute;
  white-space: pre-line;
  padding: 4px 6px;
  border-radius: 6px;
}

.hovertext:hover .hovertexttext {
  display: block;
}
<!-- this often happens on tables, where "hover" spots are below one another -->
<table>
  <tr>
    <td>
      <div class="hovertext">
        hover here to see the issue
        <span class="hovertexttext">secret text!
        more secret text!
        even more secret text!
        but you can't see all of it...
        it's being blocked by the other element
        </span>
       </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="hovertext">
        i'm blocking the text aaaa
        <span class="hovertexttext">oh no</span>
       </div>
     </td>
  </tr>
</table>

Upvotes: 2

Related Questions