CODEWITHSUNDEEP
csstooltip
Xim
Xim

Reputation: 79

How can I apply a CSS Tooltip to a table entire row?

I'm trying to apply a CSS Tooltip to a table entire row not just to a cell but I can't figure out how.

Right now I'm only be able to apply a tooltip over a cell (as you can see on the snippet). Is it possible to apply a CSS Tooltip to a <tr> element? How?

This new gif shows exactly what I'm trying to achieve

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    
    <style>
    
    .tooltip {
      position: relative;
      display: inline-block;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: none;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    </style>
    
    <body>
    
    <div class="w3-container">
      <h2>Directory Test</h2>
    
      <table class="w3-table-all w3-hoverable">
        <thead>
          <tr class="w3-light-grey">
            <th>Name</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
        </thead>
    
        <tr>
          <td><div class="tooltip">Name #1<span class="tooltiptext"><img src="http://arsil.games/images/logo-02.png"></span></div></td>
          <td>Director #1</td>
          <td>152</td>
          <td>Email #1</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>

Thanks in advance

Upvotes: 1

Views: 4615

Answers (2)

Xim
Xim

Reputation: 79

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    
    <style>
    
    .tooltip {
    position: relative;
    /* display: inline-block; */
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: none;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
   
    .tooltip-relative {
    position: relative;
    }

    </style>
    
    <body>
    
    <div class="w3-container">
      <h2>Intranet People Directory</h2>
      <h6>(You can replace the test image for a photo)</h6>
      <table class="w3-table-all w3-hoverable">
        <thead>
          <tr class="w3-light-grey">
            <th>Name</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
        </thead>
    
        <tr class="tooltip">
          <td><div class="tooltip-relative">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td>Position #1</td>
          <td>151</td>
          <td>Email #1</td>
        </tr>
        <tr class="tooltip">
          <td><div class="tooltip-relative">Name #2<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td>Position #2</td>
          <td>152</td>
          <td>Email #2</td>
        </tr>
        </tr>
        <tr class="tooltip">
          <td><div class="tooltip-relative">Name #3<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td>Position #3</td>
          <td>153</td>
          <td>Email #3</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>

Upvotes: 1

jamlab
jamlab

Reputation: 78

If I understand what you're trying to achieve, all you need to do is insert your tooltip div into each of the table's cells in that row, like so:

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    
    <style>
    
    .tooltip {
      position: relative;
      display: inline-block;
    }
    
    .tooltip .tooltiptext {
      /*visibility: hidden;*/
      display: none;
      width: 120px;
      background-color: none;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip:hover .tooltiptext {
      /*visibility: visible;*/
      display: block;
    }
    </style>
    
    <body>
    
    <div class="w3-container">
      <h2>Directory Test</h2>
    
      <table class="w3-table-all w3-hoverable">
        <thead>
          <tr class="w3-light-grey">
            <th>Name</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
        </thead>
    
        <tr>
          <td><div class="tooltip">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td><div class="tooltip">Director #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td><div class="tooltip">152<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td><div class="tooltip">Email #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>

However, I don't think you really understand what's going on here. This is not a "CSS tooltip" (no such thing exists). All it is is a simple HTML element styled with CSS such that it displays itself whenever you hover over its parent element. So, wherever you want there to be a tooltip, you'll need to add that class="tooltip" div (and its child span element).

It's also worth noting that the formatting of this div seems somewhat sloppy to me. In your CSS you've styled the tooltip with visibility: hidden rather than display: none. The difference between these two is that elements with visibility: hidden still take up space (have width and height) whereas elements with display: none don't "take up space". I believe that for a tooltip the desired option would be display: none, since tooltips are generally just supposed to be overlayed over the webpage's elements. (The code snippet I've provided has changed visibility: hidden to display: none.)

Upvotes: 2

Related Questions