HTML表格中單元格的工具提示（no javascript）

Question

是否可以爲沒有JavaScript的表格單元格提供工具提示。無法使用它。 謝謝？

Answer 1

你試過了嗎？

<td title="This is Title"> 

其工作在這裏很好的Firefox 18節（極光），Internet Explorer 8中&谷歌瀏覽器v 23X

Answer 2

是的。您可以在單元格元素上使用title屬性，但可用性較差，或者可以使用CSS工具提示（幾個現有問題，可能重複此問題）。

Answer 3

您可以使用CSS和：hover僞屬性。這是一個simple demo。它使用以下css：

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

請注意，舊版瀏覽器對以下內容的支持有限：懸停。

Answer 4

最高排名回答使用「標題」由Mudassar巴希爾屬性似乎是最簡單的方法做到這一點，但它可以減少對評論/工具提示的顯示方式的控制。

我發現Christophe對自定義工具提示類的回答似乎對評論/工具提示的行爲給予了更多的控制權。由於提供的演示不包含表格，因此按照該問題，這裏是a demo that includes a table。

需要注意的是，以「相對」，這樣的評論不壓在桌子內容時顯示「位置」風格跨度的（一個在這種情況下），必須設置父元素它。我花了一段時間才弄清楚。

#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

的BioData41添加了什麼的進化...

放置在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> 

然後，使用這樣的：

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