HTML工具提示显示属性

Question

我在HTML表的列内使用tooltip。

<tr>
    <td>
        THE FIRST COLUMN
    </td>
    <xsl:element name="td">
        <xsl:attribute name="colspan">3</xsl:attribute>
        <div class="tooltip">
            <xsl:attribute name="id">
                HERE IS THE TEXT.
            </xsl:attribute>
            <xsl:apply-templates/>
            <span class="tooltiptext">
                ( TOOLTIP TEXT )
            </span>
        </div>
    </xsl:element>
</tr>

当我为tooltip使用以下代码时:

.tooltip {
    position: relative;
    display: inline-block;
}

我使用background-color: gray;表的列。什么是我的问题是，颜色是直到文本结束，然后剩下的是白色。当我注释display: inline-block时，它只是围绕文本，但我想适合整个表格的颜色。

更新:

这是创建HTML后的图。正如你所看到的，我的问题仍然存在(不是整个单元格是彩色的，而是文本的BG)。我不能使用全局back-ground-color，因为我有不同的颜色取决于它满足的条件。(截图)

<xsl:element name="td">
    <xsl:attribute name="colspan">3</xsl:attribute>
    <div class="tooltip">
        <xsl:attribute name="id">
             <xsl:choose>
                <xsl:when test="attribute::type='PASS'">passline</xsl:when>
                <xsl:otherwise>logline</xsl:otherwise>
             </xsl:choose>
        </xsl:attribute>
        <xsl:apply-templates/>
            <span class="tooltiptext">
                HERE IS THE TEXT.
            </span>
    </div>
</xsl:element>
#passline { background-color: lime; }
#logline { background-color: #D8D8D8 ; }

Answer 1

为了能够为整个单元格上色，您需要更改标记，以便您可以使用CSS专门针对单元格。最好是带一个类，这样就变成

<xsl:element name="td">
    <xsl:attribute name="colspan">3</xsl:attribute>
    <!-- new XSL here -->
    <xsl:attribute name="class">
         <xsl:choose>
            <xsl:when test="attribute::type='PASS'">passline</xsl:when>
            <xsl:otherwise>logline</xsl:otherwise>
         </xsl:choose>
    </xsl:attribute>
    <!-- until here -->
    <div class="tooltip">
        <xsl:attribute name="id">
             <xsl:choose>
                <xsl:when test="attribute::type='PASS'">passline</xsl:when>
                <xsl:otherwise>logline</xsl:otherwise>
             </xsl:choose>
        </xsl:attribute>
        <xsl:apply-templates/>
            <span class="tooltiptext">
                HERE IS THE TEXT.
            </span>
    </div>
</xsl:element>

然后你可以用

.passline { background-color: lime; }
.logline { background-color: #D8D8D8 ; }

(注意，我对id使用的类使用了相同的名称，当然，您可以根据自己的喜好更改这些名称。)

---

(这里是旧的解决方案。对于更早的答案，请参阅编辑历史。)
假设工具提示可以占据整个表格单元格，也就是说，单元格中没有其他任何东西，我们可以使用一个小技巧使它看起来像整个单元格都有工具提示的背景颜色:将工具提示完全放置在单元格中。通过将left, right, top和bottom全部设置为0，将其展开以使用与单元格相同的区域。

如果生成的HTML看起来像下面这样，这个CSS就可以做到。
(对不起，但是堆栈片段还不能做XSLT;我必须自己翻译成HTML。)

.tooltip {
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
}
#passline { background-color: lime; }
#logline { background-color: #D8D8D8; }
.tooltip .tooltiptext {
  position: relative;
  top: calc(50% - .6em); left: 2px;
}
table {
  border: 1px solid red;
  padding-left: 3px;
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
  line-height: 1.2;
}
td {
  border-top: 1px solid; border-left: 1px solid;
  padding: 2px;
  position: relative;
}
td:first-child {
  border-left-width: 2px;
  width: 10em;
}
td:not(:empty) { padding: .5em 2px; }

<table>
  <tr>
    <td>LOG<br>
        11:08 12:01:49</td>
    <td colspan="3">
      <div class="tooltip" id="logline">
        <span class="tooltiptext">test tooltip Reset</span>
      </div>
    </td>
  </tr>
  <tr>
    <td>LOG<br>
        11:08 12:01:49</td>
    <td colspan="3">
      <div class="tooltip" id="passline">
        <span class="tooltiptext">test tooltip Reset</span>
      </div>
    </td>
  </tr>
  <tr>
    <td></td>
    <td colspan="3"></td>
  </tr>
</table>

现在这个CSS有一点缺点:它不能在IE下正常工作。不知道为什么。
如果IE兼容性是一个问题，你可以牺牲一些灵活性来解决:给工具提示一个显式的高度，与表格单元格的高度相同。在本例中，它必须变为3.4em(两行文本为2 × 1.2em，单元格填充为2 × .5em)。剩下的代码可以保持不变。

.tooltip {
  position: absolute;
  top: 0; right: 0; left: 0; height:3.4em;
}
#passline { background-color: lime; }
#logline { background-color: #D8D8D8; }
.tooltip .tooltiptext {
  position: relative;
  top: calc(50% - .6em); left: 2px;
}
table {
  border: 1px solid red;
  padding-left: 3px;
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
  line-height: 1.2;
}
td {
  border-top: 1px solid; border-left: 1px solid;
  padding: 2px;
  position: relative;
}
td:first-child {
  border-left-width: 2px;
  width: 10em;
}
td:not(:empty) { padding: .5em 2px; }

<table>
  <tr>
    <td>LOG<br>
        11:08 12:01:49</td>
    <td colspan="3">
      <div class="tooltip" id="logline">
        <span class="tooltiptext">test tooltip Reset</span>
      </div>
    </td>
  </tr>
  <tr>
    <td>LOG<br>
        11:08 12:01:49</td>
    <td colspan="3">
      <div class="tooltip" id="passline">
        <span class="tooltiptext">test tooltip Reset</span>
      </div>
    </td>
  </tr>
  <tr>
    <td></td>
    <td colspan="3"></td>
  </tr>
</table>