HTML 表格中单元格的工具提示（无 Javascript）

Posted 2023-03-05

【中文标题】HTML 表格中单元格的工具提示（无 Javascript）

【英文标题】：Tooltips for cells in HTML table (no Javascript)

【发布时间】：2012-11-30 11:12:03

【问题描述】：

是否可以在没有 javascript 的情况下为表格单元格提供工具提示。无法使用。

【参考方案1】：

你试过了吗？

<td title="This is Title">

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

【讨论】：

是，但是真的很慢:(

【参考方案2】：

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

我发现 Christophe 对自定义工具提示类的回答似乎可以更好地控制评论/工具提示的行为。由于提供的演示不包含表格，因此根据问题，这里是a demo that includes a table。

请注意，span 的父元素（在本例中为 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>

【讨论】：

非常好的解决方案，谢谢。我做了 .cellComment 固定位置让它为我工作，因为我有一个滚动表。

【参考方案3】：

是的。您可以在单元格元素上使用title 属性，但可用性较差，或者您可以使用 CSS 工具提示（几个现有问题，可能与这个问题重复）。

【参考方案4】：

您可以使用 css 和 :hover 伪属性。这是simple demo。它使用以下css：

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

请注意，旧版浏览器对 :hover 的支持有限。

【参考方案5】：

BioData41 添加的内容的演变...

将以下内容放在 CSS 样式中

     <style>

        .CellWithCommentposition: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>

【讨论】：

有什么区别？

【参考方案6】：

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

在 Java 脚本中通过比较 Data 的值有条件地添加标题。 表格由 Java 脚本动态生成。

【讨论】：

投反对票，因为它完全忽略了问题的标题。它清楚地表明没有 Javascript。