Jak mogę zastosować narzędzie CSS do całego wiersza tabeli?

Question

Próbuję zastosować podpowiedź CSS do całego wiersza tabeli, a nie tylko do komórki, ale nie mogę dowiedzieć się, jak to zrobić.

W tej chwili mogę zastosować tylko podpowiedź do komórki (jak widać na fragmencie). Czy można zastosować podpowiedź CSS do elementu <tr>? W jaki sposób?

Ten nowy gif pokazuje dokładnie, co próbuję osiągnąć

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

Z góry dziękuję

css tooltip

0

Xim 20 grudzień 2019, 04:25

Answer 1

Jeśli rozumiem, co próbujesz osiągnąć, wszystko, co musisz zrobić, to wstawić swój element div podpowiedzi do każdej komórki tabeli w tym wierszu, na przykład:

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

Jednak nie sądzę, że naprawdę rozumiesz, co się tutaj dzieje. To nie jest „podpowiedź CSS” (coś takiego nie istnieje). Wszystko to jest prostym elementem HTML ze stylem CSS, który wyświetla się za każdym razem, gdy najedziesz kursorem na jego element nadrzędny. Tak więc, gdziekolwiek chcesz, aby pojawiła się podpowiedź, musisz dodać class="tooltip" div (i jego element podrzędny span).

Warto również zauważyć, że formatowanie tego elementu div wydaje mi się nieco niechlujne. W swoim CSS stylizowałeś podpowiedź na visibility: hidden zamiast display: none. Różnica między tymi dwoma polega na tym, że elementy z visibility: hidden nadal zajmują miejsce (mają szerokość i wysokość), podczas gdy elementy z display: none nie „zajmują miejsca”. Uważam, że w przypadku podpowiedzi pożądaną opcją byłoby display: none, ponieważ podpowiedzi mają być generalnie nakładane na elementy strony internetowej. (Fragment kodu, który podałem, zmienił się visibility: hidden na display: none).

1

Jamlab256 20 grudzień 2019, 04:56

Przede wszystkim dzięki. Pomyliłem się z podpowiedzią CCS, ponieważ widziałem kilka terminów na innych stronach, więc dziękuję za wyjaśnienie. Chcę, aby "podpowiedź" pojawiła się, jeśli umieszczę mysz na dowolnej części wiersza, a nie tylko na tekście każdej komórki, a także chciałbym pokazać obraz pod pierwszą kolumną wiersza. Przesłałem nowy obraz, który pokazuje dokładnie to, czego szukam. Wielkie dzięki!

–

Xim

20 grudzień 2019, 21:15

Answer 2

    <!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>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 class="tooltip">
          <td><div class="tooltip-relative">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td>Director #1</td>
          <td>152</td>
          <td>Email #1</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>

0

Xim 2 styczeń 2020, 17:00

Jak mogę zastosować narzędzie CSS do całego wiersza tabeli?

2 odpowiedzi

Podobne pytania

Nowe pytania

css