Tooltips für Zellen in HTML-Tabelle (kein Javascript)

Question

Ist es möglich, Tooltips für Tabellenzellen ohne JavaScript zu haben. Kann es nicht benutzen. Danke?

Answer 1

haben Sie es versucht?

<td title="This is Title"> 

seine Arbeit an Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x

Answer 2

Ja. Sie können das title-Attribut für Zellenelemente mit schlechter Benutzerfreundlichkeit verwenden oder Sie können CSS-Tooltips verwenden (mehrere vorhandene Fragen, möglicherweise auch Duplikate).

Answer 3

Sie können CSS und die Pseudoeigenschaft: hover verwenden. Hier ist eine simple demo. Es nutzt die folgenden CSS:

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

Beachten Sie, dass älterer Browser Unterstützung eingeschränkt hat: schweben.

Answer 4

Die ranghöchste Antwort von Mudassar Bashir hier in Ordnung, den "title" Attribut scheint die einfachste Möglichkeit, tue dies, aber es gibt dir weniger Kontrolle darüber, wie der Kommentar/Tooltip angezeigt wird.

Ich fand, dass die Antwort von Christophe für eine benutzerdefinierte Tooltip-Klasse viel mehr Kontrolle über das Verhalten des Kommentars/Tooltip gibt. Da die bereitgestellte Demo keine Tabelle enthält, wie in der Frage, hier ist a demo that includes a table.

Beachten Sie, dass der Stil "position" für das übergeordnete Element des Bereichs (in diesem Fall a) auf "relativ" gesetzt sein muss, damit der Kommentar den Inhalt der Tabelle bei der Anzeige nicht verschiebt. Ich brauchte eine Weile, um das herauszufinden.

#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

eine Weiterentwicklung dessen, was BioData41 hinzugefügt ...

Platz, was in CSS-Style

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

Dann folgt, ist es wie folgt verwenden:

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