HTML tablosundaki hücreler için araç ipuçları (Javascript yok)

JavaScript içermeyen tablo hücreleri için araç ipuçlarına sahip olmak mümkün mü? Kullanamazsın.

denedin mi?

<td title="This is Title">

Firefox v 18 (Aurora), Internet Explorer 8 ve Google Chrome v 23x'te iyi çalışıyor

Evet. Sen kullanabilirsiniz titledüşük kullanım kalitesiyle, hücre elemanlarında niteliğini veya (birkaç varolan sorular, muhtemelen bu birinin yineler) CSS araç ipuçlarını kullanabilirsiniz.

Mudassar Bashir'in "başlık" niteliğini kullanan en yüksek dereceli cevabı, bunu yapmanın en kolay yolu gibi görünse de, yorumun / araç ipucunun nasıl görüntüleneceği konusunda size daha az kontrol sağlar.

Özel bir araç ipucu sınıfı için Christophe tarafından verilen cevabın, yorumun / araç ipucunun davranışı üzerinde çok daha fazla kontrol sağladığını buldum. Sağlanan demo, soruya göre bir tablo içermediğinden, burada bir tablo içeren bir demo bulunmaktadır .

Açıklığın üst öğesi için "konum" stilinin (bu durumda a) "göreli" olarak ayarlanması gerektiğine dikkat edin, böylece yorum görüntülendiğinde tablo içeriğini etrafına itmez. Bunu anlamam biraz zaman aldı.

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

Css ve: hover sözde özelliğini kullanabilirsiniz. İşte basit bir demo . Aşağıdaki css'yi kullanır:

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

Eski tarayıcıların: hover için sınırlı desteği olduğunu unutmayın.

BioData41'in ekledikleri evrim ...

Aşağıdakileri CSS stiline yerleştirin

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

Ardından, şu şekilde kullanın:

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

Java komut dosyasında, Veri değerini karşılaştırarak koşullu olarak başlık eklemek. Tablo, dinamik olarak Java betiği tarafından oluşturulur.