Question

我在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。）。我无法使用全局back-ground-color，因为我有不同的颜色取决于它满足时的条件。 (screenShot)

<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 ; }

CSS中的

。

（注意我对你用于id的类使用相同的名称，但你可以根据自己的喜好改变它们。）

（此处较旧的解决方案。对于较旧的答案，请参阅编辑历史。）
假设工具提示可以占用整个表格单元格，也就是说，单元格中没有任何其他内容，我们可以使用一个小技巧使其看起来像整个单元格具有工具提示的背景颜色：定位工具提示绝对是在牢房里。通过将left，right，top和bottom all设置为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>

HTML工具提示显示属性

1 个答案: