Etykietki narzędzi dla komórek w tabeli HTML (bez javascript)

Question

Czy możliwe jest posiadanie podpowiedzi dla komórek tabeli bez JavaScript. Nie można go użyć. Dzięki?

Answer 1

czy próbowałeś?

<td title="This is Title"> 

jego pracy w porządku tutaj na Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x

Answer 2

Tak. Możesz użyć atrybutu title na elementach komórki, ze słabą użytecznością lub możesz użyć etykiet CSS (kilka istniejących pytań, być może duplikatów tego).

Answer 3

Możesz użyć css i pseudo-właściwości: hover. Oto simple demo. Używa następujących css:

a span.tooltip {display:none;} 
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;} 

Pamiętaj, że starsze przeglądarki mają ograniczoną obsługę: hover.

Answer 4

Najwyższy rangą odpowiedź przez Mudassar Baszirem pomocą "tytuł" atrybut wydaje się najłatwiejszym sposobem zrób to, ale daje mniejszą kontrolę nad wyświetlaniem komentarza/etykiety narzędzia.

Znalazłem, że odpowiedź Christophe'a na niestandardową klasę podpowiedzi wydaje się zapewniać większą kontrolę nad zachowaniem komentarza/podpowiedzi. Ponieważ dostarczone demo nie zawiera tabeli, jak na pytanie, tutaj jest a demo that includes a table.

Należy zauważyć, że styl "pozycja" dla elementu nadrzędnego zakresu (w tym przypadku) musi być ustawiony na "względny", aby komentarz nie wyświetlał zawartości tabeli podczas jej wyświetlania. Zrozumienie tego zajęło mi trochę czasu.

#MyTable{ 
 
    border-style:solid; 
 
    border-color:black; 
 
    border-width:2px 
 
} 
 

 
#MyTable td{ 
 
    border-style:solid; 
 
    border-color:black; 
 
    border-width:1px; 
 
    padding:3px; 
 
} 
 

 
.CellWithComment{ 
 
    position:relative; 
 
} 
 

 
.CellComment{ 
 
    display:none; 
 
    position:absolute; 
 
    z-index:100; 
 
    border:1px; 
 
    background-color:white; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    border-color:red; 
 
    padding:3px; 
 
    color:red; 
 
    top:20px; 
 
    left:20px; 
 
} 
 

 
.CellWithComment:hover span.CellComment{ 
 
    display:block; 
 
}

<table id="MyTable"> 
 
    <caption>Cell 1,2 Has a Comment</caption> 
 
    <thead> 
 
    <tr> 
 
     <td>Heading 1</td> 
 
     <td>Heading 2</td> 
 
     <td>Heading 3</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr></tr> 
 
     <td>Cell 1,1</td> 
 
     <td class="CellWithComment">Cell 1,2 
 
     <span class="CellComment">Here is a comment</span> 
 
     </td> 
 
     <td>Cell 1,3</td> 
 
    <tr> 
 
     <td>Cell 2,1</td> 
 
     <td>Cell 2,2</td> 
 
     <td>Cell 2,3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 5

ewolucja co dodaje BioData41 ...

Place, co następuje w stylu CSS

 <style> 

     .CellWithComment{position:relative;} 

     .CellComment 
     { 
      visibility: hidden; 
      width: auto; 
      position:absolute; 
      z-index:100; 
      text-align: Left; 
      opacity: 0.4; 
      transition: opacity 2s; 
      border-radius: 6px; 
      background-color: #555; 
      padding:3px; 
      top:-30px; 
      left:0px; 
     } 
     .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;} 
</style> 

Następnie użyj go tak:

 <table> 
      <tr> 
       <th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th> 
       <th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th> 
       <th>Opened</th> 
       <th>Event</th> 
       <th>Severity</th>   
       <th>Id</th> 
       <th>Component Name</th> 
      </tr> 
      <tr> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
     </table>