我在tooltip中的表的列内使用HTML。
<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。）。我不能使用global 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 ; }
为了能够给整个单元着色，您将需要更改标记，以便可以使用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 ; }
在CSS中。
（请注意，我为ID使用的类使用相同的名称，但是您可以根据自己的喜好更改它们。）
（此处提供较旧的解决方案。有关较旧的答案，请参见编辑历史记录。）
假设工具提示可以占用整个表格单元格，也就是说，该单元格中没有其他内容，我们可以使用一些技巧来制作它看起来整个单元格都具有工具提示的背景色：绝对将工具提示放置在单元格中。展开它通过设置使用相同面积的小区left，right，top和bottom所有为0。
如果生成的HTML如下所示，则此CSS会执行此操作。
（很抱歉，但是stacksnippet还不能执行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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句