I have code formatted in pre. I use overflow: auto in case it gets too wide. Now I want to add documentation tooltips to whereever I use one of my extensions. All my extensions are bold.
There are extremely many examples, that use some of the same extensions over and over again. So my plan is to define the formatting once and add a class for each docstring:
<style>
pre { background: lightblue; width: 90vw; padding: 5px; overflow: auto }
pre b { position: relative }
b[class]:hover::after {
position: absolute; z-index: 4; top: 100%; left: 0; min-width: 40vw;
white-space: pre-line; font-size: .7rem; font-weight: initial;
background: white; padding: 2px; border: solid 1px lightgray
}
.echo:hover::after {
content: "Echo (E) or echo (e)\A Echo prettified args or $_ with spaces, for lowercase echo, with final newline. In scalar or list context return prettified result instead.";
}
</style>
<pre>
these are 2 very long preformatted lines with the word <b class="echo">echo</b> that go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on almost forever
these are 2 very long preformatted lines with the word <b class="echo">echo</b> that go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on almost forever
</pre>
But both in FF & Chrome, even if I have only overflow-x, the box gets visually clipped in y-direction. One can use the mouse-wheel to scroll it into view, but that sucks big time! How can I let only my tooltip escape (as it would be with no overflow, but I need that)? I have tried various combinations of position, but this one seems the only one that puts the tooltip at the right position.
CSS overflow: auto hiding tooltip suggests position: fixed but then the tooltip doesn't appear at all.
So you can see what I'm talking about, in https://perl1liner.sourceforge.io/Collatz/ I have armed bold words in the blue code boxes with tooltip classes. Till this is solved, I do not have position: relative on these b-tags as I would want. Therefore the tooltip pops up under the whole code-box. :-( This page – including veggie-burger and its buttons – is proudly made without JavaScript (except the Math/Collatz linked subpage, coz Chrome still can't handle MathML). So I'm looking for a pure css solution!
