Tooltip über Scrollbar des div-Containers legen

halloICKEbins

Morgen,

ich habe das nachfolgende Problem, dass ich gerne mein Tooltip über den div-Container hinaus anzeigen lassen will - er aber leider immer in diesen Grenzen bleibt. Es würde vom Ansatz auch reichen, wenn der Tooltip unter dem div-Container angezeigt werden würde.

Ich weiß, dass es an dem overflov liegt, aber kann man den Tooltip nicht drauf bzw. unterhalb setzen?

Code

<style>
.tooltip {
    transform: none;
}


.tooltip:hover > .tooltip-text {
    pointer-events: auto;
    opacity: 1.0;
}


.tooltip > .tooltip-text {
    display: block;
    position: absolute;
    z-index: 6000;
    overflow: visible;
    padding: 5px 8px;
    margin-top: 20px;
    line-height: 16px;
    border-radius: 4px;
    text-align: left;
    color: red;
    background: #000;
    pointer-events: none;
    opacity: 0.0;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}


/* Arrow */
.tooltip > .tooltip-text:before {
    display: inline;
    top: -5px;
    content: "";
    position: absolute;
    border: solid;
    border-color: rgba(0, 0, 0, 1) transparent;
    border-width: 0 .5em .5em .5em;
    z-index: 6000;
    left: 0px;
}


/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after {
    top: -20px;
    content: " ";
    display: block;
    height: 20px;
    position: absolute;
    width: 60px;
    #left: 20px;
}
</style>

Alles anzeigen

HTML

<div style="overflow-x:auto; width: 100%">
    <table class="table" style="height: 100%">
        <tr>
            <td class="td">
                <div class="tooltip">x<span class="tooltip-text">TEXT TEXT TEXT</span></div>
            </td>
            <td class="td">
                <div class="tooltip">x<span class="tooltip-text">TEXT TEXT TEXT</span></div>
            </td>
            <td class="td">
                <div class="tooltip">x<span class="tooltip-text">TEXT TEXT TEXT</span></div>
            </td>
            <td class="td">
                <div class="tooltip">x<span class="tooltip-text">TEXT TEXT TEXT</span></div>
            </td>
            <td class="td">
                <div class="tooltip">x<span class="tooltip-text">TEXT TEXT TEXT</span></div>
            </td>
            <td class="td">
                <div class="tooltip">x<span class="tooltip-text">TEXT TEXT TEXT</span></div>
            </td>
            <td class="td">
                <div class="tooltip">x<span class="tooltip-text">TEXT TEXT TEXT</span></div>
            </td>
            ...
        </tr>
    </table>
</div>

Alles anzeigen

Tags