Chú giải công cụ cho các ô trong bảng HTML (không có javascript)

Question

Có thể có chú giải công cụ cho các ô bảng không có JavaScript hay không. Không thể sử dụng nó. Cảm ơn?

Answer 1

bạn đã thử chưa?

<td title="This is Title"> 

nó làm việc tốt ở đây trên Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x

Answer 2

Có. Bạn có thể sử dụng thuộc tính title trên các phần tử ô, với khả năng sử dụng kém hoặc bạn có thể sử dụng chú giải công cụ CSS (một số câu hỏi hiện có, có thể trùng lặp với câu hỏi này).

Answer 3

Bạn có thể sử dụng css và thuộc tính giả: hover. Đây là simple demo. Nó sử dụng css sau:

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

Lưu ý rằng các trình duyệt cũ có hỗ trợ giới hạn: hover.

Answer 4

Câu trả lời thứ hạng cao nhất bởi Mudassar Bashir sử dụng "danh hiệu" thuộc tính dường như là cách dễ nhất để làm điều này, nhưng nó cho phép bạn kiểm soát ít hơn cách chú thích/chú giải công cụ được hiển thị.

Tôi thấy rằng Câu trả lời của Christophe cho một lớp công cụ tùy chỉnh dường như kiểm soát nhiều hơn hành vi của chú thích/chú giải công cụ. Vì bản demo được cung cấp không bao gồm một bảng, theo câu hỏi, ở đây là a demo that includes a table.

Lưu ý rằng kiểu "vị trí" cho phần tử mẹ của khoảng (trong trường hợp này), phải được đặt thành "tương đối" để nhận xét không đẩy nội dung bảng xung quanh khi nó được hiển thị. Phải mất một lúc tôi mới hiểu ra điều đó.

#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

Một tiến hóa của những gì BioData41 thêm ...

Nơi những gì sau trong phong cách 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> 

Sau đó, sử dụng nó như thế này:

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