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

Có thể có chú giải công cụ cho các ô bảng không có JavaScript. Không sử dụng được.

bạn đã thử chưa

<td title="This is Title">

nó hoạt động tốt ở đây trên Firefox v 18 (Aurora), Internet Explorer 8 và Google Chrome v 23x

Đúng. Bạn có thể sử dụng titlethuộc tính 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).

Câu trả lời được xếp hạng cao nhất bởi Mudassar Bashir bằng cách sử dụng thuộc tính "title" (tiêu đề) có vẻ 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 hiển thị chú thích / chú giải công cụ.

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

Lưu ý rằng kiểu "vị trí" cho phần tử mẹ của khoảng (a 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 ra xung quanh khi nó được hiển thị. Tôi đã mất một chút thời gian để tìm 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>

Bạn có thể sử dụng css và thuộc tính giả: hover. Đây là một bản demo đơn giản . 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ũ hơn có hỗ trợ hạn chế cho: hover.

Sự phát triển của những gì BioData41 đã thêm vào ...

Đặt những gì sau đây theo kiểu 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>

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

Trong tập lệnh Java thêm tiêu đề có điều kiện bằng cách so sánh giá trị của Dữ liệu. Bảng được tạo động bởi tập lệnh Java.