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