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

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

Hast du es versucht?

<td title="This is Title">

Hier funktioniert es einwandfrei unter Firefox 18 (Aurora), Internet Explorer 8 und Google Chrome 23x

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

Die am höchsten bewertete Antwort von Mudassar Bashir mit dem Attribut "title" scheint der einfachste Weg zu sein, gibt Ihnen jedoch weniger Kontrolle darüber, wie der Kommentar / Tooltip angezeigt wird.

Ich fand heraus, dass die Antwort von Christophe für eine benutzerdefinierte Tooltip-Klasse viel mehr Kontrolle über das Verhalten des Kommentars / Tooltips zu geben scheint. Da die bereitgestellte Demo gemäß der Frage keine Tabelle enthält, ist hier eine Demo, die eine Tabelle enthält .

Beachten Sie, dass der "Position" -Stil für das übergeordnete Element des Bereichs (in diesem Fall a) auf "relativ" gesetzt sein muss, damit der Kommentar den Tabelleninhalt nicht verschiebt, wenn er angezeigt wird. 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>

Sie können CSS und die Pseudo-Eigenschaft: hover verwenden. Hier ist eine einfache Demo . Es verwendet das folgende 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 ältere Browser nur eingeschränkte Unterstützung für: Hover bieten.

Eine Weiterentwicklung dessen, was BioData41 hinzugefügt hat ...

Platzieren Sie das Folgende im CSS-Stil

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

Verwenden Sie es dann folgendermaßen:

        <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";
}

In Java-Skripten wird der Titel durch Vergleichen des Datenwerts bedingt hinzugefügt. Die Tabelle wird vom Java-Skript dynamisch generiert.