Tooltip über Scrollbar des div-Containers legen

halloICKEbins · 12. März 2019

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