Table heading background transparent when tooltip in in cell #562

etrusci-org · 2024-06-12T09:09:06Z

etrusci-org
Jun 12, 2024

Hi there :)

Not sure if this is a "bug".
Got a simple table with some cells that have links with tooltips.
Made the table header sticky.
When now scrolling, the content inside the cells that has tooltips, is visible below the header cells.
I found that if I adjust the table header z-index, it's fine again.

the table:

scrolling:

z-index seems to fix it:

Test/demo HTML:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <style>
        thead {
            position: sticky;
            top: 0;
            /* try me: 
            z-index: 100;
            */
        }
    </style>
    <title>foobar</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>foo</th>
                <th>bar</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#" data-tooltip="boo">link with tooltip</a></td>
                <td>b</td>
            </tr>
            <tr>
                <td><a href="#">link</a></td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td><a href="#">link</a></td>
            </tr>
            <tr>
                <td>f</td>
                <td><span data-tooltip="boo">span tooltip</span></td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
            <tr>
                <td>f</td>
                <td>b</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Table heading background transparent when tooltip in in cell #562

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Table heading background transparent when tooltip in in cell #562

Uh oh!

etrusci-org Jun 12, 2024

Replies: 0 comments

etrusci-org
Jun 12, 2024