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

Czy można mieć podpowiedzi dla komórek tabeli bez JavaScript. Nie mogę tego użyć.

czy próbowałeś?

<td title="This is Title">

działa dobrze tutaj w przeglądarce Firefox v 18 (Aurora), Internet Explorer 8 i Google Chrome v 23x

Tak. Możesz użyć titleatrybutu na elementach komórek o słabej użyteczności lub możesz użyć podpowiedzi CSS (kilka istniejących pytań, prawdopodobnie duplikatów tego).

Najwyżej sklasyfikowana odpowiedź Mudassara Bashira przy użyciu atrybutu „tytuł” ​​wydaje się najłatwiejszym sposobem, ale daje mniejszą kontrolę nad sposobem wyświetlania komentarza / podpowiedzi.

Okazało się, że odpowiedź Christophe'a dla niestandardowej klasy podpowiedzi wydaje się zapewniać znacznie większą kontrolę nad zachowaniem komentarza / podpowiedzi. Ponieważ dostarczone demo nie zawiera tabeli, jak na pytanie, oto demo, które zawiera tabelę .

Zwróć uwagę, że styl „pozycja” dla elementu nadrzędnego zakresu (w tym przypadku a) musi być ustawiony na „względny”, aby komentarz nie powodował wypychania zawartości tabeli podczas wyświetlania. Zajęło mi trochę czasu, zanim to rozgryzłem.

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

Możesz użyć css i pseudo-właściwości: hover. Oto proste demo . Wykorzystuje następujący 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.

Ewolucja tego, co dodała BioData41 ...

Umieść to co poniżej 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 tego w ten sposób:

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

if (data[j] =='B'){
    row.cells[j].title="Basic";
}

W skrypcie Java warunkowe dodanie tytułu poprzez porównanie wartości danych. Tabela jest generowana dynamicznie przez skrypt Java.