HTML Tooltips display property

Question

I am using tooltip inside a column of a table in 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>

When I am using the following code for the tooltip :

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

I am using background-color: gray; for the column of table. What is my problem is that the color is till end of text and then the rest is white. When I am commenting display: inline-block then it is only around the text but I would like to fit color in whole the table.

Update:

Here is a figure after creating HTML. As you see my problem remains(not thw whole cell is colored, rather BG of text.). I could not use the global back-ground-color , because I have different colors depend on the condition when it is fulfilled. (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

To be able to color the whole cell, you will need to change the markup so that you can target the cell specifically with CSS. Preferably with a class, so that would become

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

and then you can use

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

in the CSS.

(Note I used the same names for the classes you used for the ids, but you can change those to your liking of course.)

---

(Older solution here. For ever older answers see edit history.)
Assuming that the tooltip can take up the whole of the table cell, that is, there isn't anything else in the cell, we can use a little trick to make it look like the whole cell has the tooltip's background color: position the tooltip absolutely in the cell. Expand it to use the same area as the cell by setting left , right , top and bottom all to 0.

If the generated HTML looks anything like the below, this CSS will do it.
(Sorry, but the stacksnippet can't do XSLT yet; I had to translate to HTML myself.)

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

Now this CSS has a bit of a disadvantage: it won't work properly under IE. Not sure why.
If IE compatibility is an issue, you can solve at the cost of sacrificing some flexibility: give the tooltips an explicit height, the same as the height of the table cells. In the example, it will have to become 3.4em (2 × 1.2em for the two lines of text and 2 × .5em for the cell padding). The rest of the code can stay the same.

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