Всплывающие подсказки для ячеек в таблице HTML (без Javascript)

Можно ли использовать всплывающие подсказки для ячеек таблицы без JavaScript. Не могу его использовать.

ты пробовала?

<td title="This is Title">

он отлично работает здесь, в Firefox v 18 (Aurora), Internet Explorer 8 и Google Chrome v 23x

Да. Вы можете использовать titleатрибут в элементах ячеек, с плохим удобством использования, или вы можете использовать всплывающие подсказки CSS (несколько существующих вопросов, возможно, дубликаты этого).

Ответ с наивысшим рейтингом от Мудассара Башира с использованием атрибута «title» кажется самым простым способом сделать это, но он дает вам меньше контроля над тем, как отображается комментарий / всплывающая подсказка.

Я обнаружил, что ответ Кристофа для настраиваемого класса всплывающей подсказки, похоже, дает гораздо больший контроль над поведением комментария / всплывающей подсказки. Поскольку предоставленная демонстрация не включает таблицу, согласно вопросу, вот демонстрация, которая включает таблицу .

Обратите внимание, что стиль «position» для родительского элемента диапазона (в данном случае a) должен быть установлен на «relative», чтобы комментарий не перемещал содержимое таблицы при его отображении. Мне потребовалось некоторое время, чтобы понять это.

#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. Вот простая демонстрация . Он использует следующий 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 script условное добавление заголовка путем сравнения значения Data. Таблица генерируется Java-скриптом динамически.