HTML表格中单元格的工具提示(无Javascript)

Question

是否可以为没有JavaScript的表格单元格提供工具提示.不能用它.

Answer 1

你有没有尝试过？

<td title="This is Title">

它在Firefox v 18(Aurora),Internet Explorer 8和Google Chrome v 23x上运行良好

Answer 2

是.您可以title在单元格元素上使用该属性,可用性较差,或者您可以使用CSS工具提示(几个现有问题,可能是这个问题的重复).

Answer 3

Mudassar Bashir使用"title"属性排名最高的答案似乎是最简单的方法,但它使您无法控制评论/工具提示的显示方式.

我发现Christophe对自定义工具提示类的回答似乎可以更好地控制注释/工具提示的行为.由于提供的演示不包含表格,根据问题,这是一个包含表格的演示.

请注意,span的父元素(在本例中为a)的"position"样式必须设置为"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>

Answer 4

您可以使用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.