คำแนะนำสำหรับเซลล์ในตาราง HTML (ไม่มี Javascript)

เป็นไปได้ไหมที่จะมีคำแนะนำสำหรับเซลล์ตารางที่ไม่มี JavaScript ใช้ไม่ได้.

คุณลองหรือยัง

<td title="This is Title">

มันทำงานได้ดีที่นี่บน Firefox v 18 (Aurora), Internet Explorer 8 และ Google Chrome v 23x

ใช่. คุณสามารถใช้titleแอตทริบิวต์กับองค์ประกอบของเซลล์ด้วยความสามารถในการใช้งานที่ไม่ดีหรือคุณสามารถใช้คำแนะนำเครื่องมือ CSS (คำถามที่มีอยู่หลายข้อซึ่งอาจซ้ำกับคำถามนี้)

คำตอบที่ติดอันดับสูงสุดโดย Mudassar Bashir โดยใช้แอตทริบิวต์ "title" ดูเหมือนจะเป็นวิธีที่ง่ายที่สุดในการดำเนินการนี้ แต่จะช่วยให้คุณควบคุมวิธีแสดงความคิดเห็น / คำแนะนำเครื่องมือได้น้อยลง

ฉันพบว่าคำตอบของ Christophe สำหรับคลาสคำแนะนำเครื่องมือที่กำหนดเองดูเหมือนจะให้การควบคุมพฤติกรรมของข้อคิดเห็น / คำแนะนำเครื่องมือได้มากขึ้น ตั้งแต่การสาธิตที่ให้บริการไม่รวมถึงโต๊ะเป็นต่อคำถามที่ว่านี่คือการสาธิตที่มีตาราง

โปรดทราบว่าสไตล์ "ตำแหน่ง" สำหรับองค์ประกอบหลักของช่วง (a ในกรณีนี้) ต้องตั้งค่าเป็น "สัมพัทธ์" เพื่อให้ข้อคิดเห็นไม่ดันเนื้อหาของตารางไปรอบ ๆ เมื่อมีการแสดง ฉันใช้เวลาสักพักหนึ่งในการคิดออก

#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 และ: hover pseudo-property นี่คือการสาธิตที่เรียบง่าย ใช้ css ต่อไปนี้:

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

โปรดทราบว่าเบราว์เซอร์รุ่นเก่ามีการรองรับอย่าง จำกัด สำหรับ: hover

วิวัฒนาการของสิ่งที่ 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>

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

ในสคริปต์ Java เพิ่มหัวเรื่องตามเงื่อนไขโดยการเปรียบเทียบมูลค่าของข้อมูล ตารางถูกสร้างขึ้นโดยสคริปต์ Java แบบไดนามิก