0

I am trying to show a tooltip created into a table field, over the other fields and tables. The problem is that the other table and elements are created into other DIVs that have set the CSS z-index property to 0.

So even if I set the tooltip CSS z-index property to a high value (e.g. 9999), it is always showed behind the other tables (because of the z-index stacking contexts).

I do NOT want to modify the z-index property of the other elements, as I am injecting my elements into a third party created web page.

Also I do NOT want to move the tooltip to an upper level, as when the element where the tooltip is contained will be dynamically removed for the third party, I want the tooltip to be automatically removed also.

Is there any CSS solution for this?

I have this JSFiddle to play with the situation: https://jsfiddle.net/u6q8j4ck/

.content {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 0;
}

table {
  position: relative;
  background: #ccc;
}

table td {
  white-space: nowrap;
}

table td span {
  position: relative;
  display: inline-block;
}

.hoverable {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hoverable img {
  display: inline-block;
  width: 15px;
}

.tooltip {
  position: absolute;
  display: none;
  z-index: 9999;
  padding: 5px;
  background-color: white;
  white-space: nowrap;
  border-style: solid;
  border-width: 1px;
}

.hoverable:hover .tooltip{
  display: block;
}
<html>
<body>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>

</body>
</html>
Aleix
  • 663
  • 1
  • 8
  • 22
  • remove z-index: 0; from content or force it to be auto – Temani Afif Jul 01 '20 at 13:45
  • *as I am injecting my elements into a third party created web page.* --> what is the scope of your elements? is content included? – Temani Afif Jul 01 '20 at 13:49
  • @TemaniAfif I can not modify the z-index property of ".content", as it would affect the third party elements I am injecting styles and elements (the tables) into the Twitter web page (a list of article elements) – Aleix Jul 01 '20 at 14:07
  • content is having z-index:0 so you will simply modify it to `auto`. How this will affect the other elements? – Temani Afif Jul 01 '20 at 14:09
  • ".content" are a third party elements, my injected code and CSS styles are just the "tables", I want to avoid changing any style of ".content" – Aleix Jul 01 '20 at 14:11
  • then you are out of luck if you cannot change content or any other element outside – Temani Afif Jul 01 '20 at 14:17
  • that was my fear, but I wanted to try if there was some trick that I do not know. Thanks anyway! – Aleix Jul 01 '20 at 14:20
  • 1
    all the trick will require at least one CSS declaration on an upper element. Here is a related question for more details and with all the possible tricks: https://stackoverflow.com/a/54903621/8620333 .. you either need to play with z-index or use the 3D transform trick (both of them require editing content element) – Temani Afif Jul 01 '20 at 14:22

1 Answers1

1

May be I am missing something, but using one of the tricks explained in the answer linked by Temani Afif seems to solvre the problem:

.content {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 0;
}

table {
  position: relative;
  background: #ccc;
}

table td {
  white-space: nowrap;
}

table td span {
  position: relative;
  display: inline-block;
}

.hoverable {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transform-style: preserve-3d;
}

.hoverable img {
  display: inline-block;
  width: 15px;
}

.tooltip {
  position: absolute;
  display: none;
  z-index: 9999;
  padding: 5px;
  background-color: white;
  white-space: nowrap;
  border-style: solid;
  border-width: 1px;
  transform: translateZ(1px);
}

.hoverable:hover .tooltip{
  display: block;
}
<html>
<body>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>

</body>
</html>
vals
  • 61,425
  • 11
  • 89
  • 138
  • This snippet was just to try to reproduce the situation, but the real context has extra complex css specifications. As your solution works for my snippet, I accept your answer, so for other users. But in my real case I had to move the `transform-style: preserve-3d;` property some levels up to make it work (so I had to affect the third page elements, something that I am trying to avoid). – Aleix Jul 02 '20 at 10:22