Was wäre nötig, um CSS-Tooltips vor dem Überlaufen zu bewahren?

Angenommen, Sie haben Elemente mit CSS-Tooltips und positionieren diese Tooltips so, dass sie beim Hovern (oder besser: beim Klicken/Tippen) neben dem Element erscheinen. Daneben wo? Darüber? Was ist, wenn das Element bereits sehr nah am oberen Bildschirmrand ist? In diesem Fall sollte es wahrscheinlich darunter erscheinen. Oder umgekehrt – und dasselbe gilt für die linken und rechten Ränder des Bildschirms. Sie möchten auf jeden Fall, dass es sichtbar ist und nicht über den Viewport hinausgeht.

Manchmal, wenn neue UI-Elemente geöffnet werden, müssen diese randbewusst sein, um zu verhindern, dass der Inhalt im Inneren seltsame Scrollbalken auslöst oder schlimmer noch, Inhalt abschneidet.

Das ist ein altbekanntes Problem im Web. Ich erinnere mich, dass ich bewusst jQuery UI-Tooltips verwendet habe, weil sie diese besondere Fähigkeit hatten, randbewusst zu sein. Man kann sich das JavaScript dahinter vorstellen. Man ermittelt, wo das Element platziert werden wird, und verwendet Positionierungsmathematik, um herauszufinden, ob es sich innerhalb des Viewports befindet. Wenn nicht, versucht man eine andere Position, die *passt*.

Wie immer, alles Alte ist wieder neu. Schauen Sie sich Floating UI an, das genau für dieses Problem entwickelt wurde.

Floating UI ist ein Low-Level-Toolkit zum Positionieren von *schwebenden Elementen*, während diese intelligent im Blickfeld gehalten werden. Tooltips, Popovers, Dropdowns, Menüs und mehr.

Es sieht super gut gemacht aus. Mir gefällt der Fokus, die Demos sind super gut gemacht und es ist eine ziemlich kleine Abhängigkeit.

Aber wissen Sie, was noch cooler wäre? Wenn CSS all das von selbst könnte. Das ist die Stimmung bei CSS Anchored Positioning – vorerst nur ein "explainer"-Dokument

Beim Erstellen interaktiver Komponenten oder Anwendungen möchten Autoren häufig UI-Elemente nutzen, die in einer "Top-Layer" gerendert werden können. Beispiele für solche UI-Elemente sind Inhaltsauswahl, Lehrmittel, Tooltips und Menüs. "Enabling Popups" hat ein neues popup-Element eingeführt, um die Erstellung vieler dieser Top-Layer-Elemente zu erleichtern.

Autoren möchten solche Top-Layer-UI häufig an einem Punkt auf einem anderen Element "fixieren" oder "verankern", das hier als "Ankerelement" bezeichnet wird. Wie die Top-Layer-UI in Bezug auf ihr Ankerelement positioniert wird, wird weiter durch die Ränder des Layout-Viewports beeinflusst oder eingeschränkt.

Ich liebe es. Die Webplattform in ihrer besten Form. Zu sehen, was Autoren tun müssen und zu Bibliotheken greifen, um es zu tun, und zu versuchen, es nativ (und hoffentlich besser) zu machen.