Tooltip untuk sel dalam tabel HTML (tanpa Javascript)

Apakah mungkin memiliki keterangan alat untuk sel tabel tanpa JavaScript. Tidak bisa menggunakannya.

sudahkah kamu mencoba

<td title="This is Title">

ini berfungsi dengan baik di sini di Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x

Iya. Anda dapat menggunakan titleatribut pada elemen sel, dengan kegunaan yang buruk, atau Anda dapat menggunakan tooltips CSS (beberapa pertanyaan yang ada, mungkin duplikat dari pertanyaan ini).

Jawaban dengan peringkat tertinggi oleh Mudassar Bashir dengan menggunakan atribut "judul" tampaknya merupakan cara termudah untuk melakukan ini, tetapi Anda tidak dapat mengontrol bagaimana komentar / keterangan alat ditampilkan.

Saya menemukan bahwa Jawaban Christophe untuk kelas tooltip kustom tampaknya memberikan lebih banyak kendali atas perilaku komentar / tooltip. Karena demo yang disediakan tidak menyertakan tabel, sesuai pertanyaannya, berikut adalah demo yang menyertakan tabel .

Perhatikan bahwa gaya "posisi" untuk elemen induk span (dalam hal ini a), harus disetel ke "relatif" sehingga komentar tidak mendorong konten tabel saat ditampilkan. Aku butuh sedikit waktu untuk memikirkannya.

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

Anda dapat menggunakan css dan: hover pseudo-property. Berikut ini demo sederhana . Ini menggunakan css berikut:

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

Perhatikan bahwa browser lama memiliki dukungan terbatas untuk: hover.

Evolusi dari apa yang ditambahkan BioData41 ...

Tempatkan apa yang mengikuti dalam gaya 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>

Kemudian, gunakan seperti ini:

        <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";
}

Dalam skrip Java menambahkan judul secara kondisional dengan membandingkan nilai Data. Tabel dibuat oleh skrip Java secara dinamis.