Say you’ve an components with CSS tooltips and also you’re going to place these tooltips such that it opens up subsequent to the component on hover (or most likely higher: when clicked/tapped). Subsequent to it the place? Above it? What if the component is already actually near the highest of the display screen? In that case, it ought to most likely open beneath it. Or vice versa — and the identical goes for the left and proper edges of the display screen. You undoubtedly need it to be seen reasonably than overflowing the viewport.
Typically whenever you open new UI components, they have to be edge-aware to forestall the content material inside from triggering bizarre scrollbars, or worse, slicing off content material.
As ever, every part previous is new once more. Try Floating UI, designed only for this downside.
Floating UI is a low-level toolkit to place floating components whereas intelligently conserving them in view. Tooltips, popovers, dropdowns, menus, and extra.
It appears tremendous nicely achieved. I like the main focus, the demos are tremendous nicely achieved, and it’s a reasonably tiny dependency.
However ya know what can be even cooler? If CSS may do that all by itself. That’s the vibe with CSS Anchored Positioning — for now simply an “explainer” doc:
When constructing interactive elements or functions, authors incessantly need to leverage UI components that may render in a “top-layer”. Examples of such UI components embrace content material pickers, instructing UI, tooltips, and menus. “Enabling Popups” launched a brand new popup component to make many of those top-layer components simpler to creator.
Authors incessantly want to “pin” or “anchor” such top-layer UI to some extent on one other component, referred to right here as an “anchor component”. How the top-layer UI is positioned with respect to its anchor component is additional influenced or constrained by the sides of the format viewport.
I adore it. The online platform at its finest. Seeing what authors are needing to do and reaching for libraries to do, and making an attempt to step in and do it natively (and hopefully higher).
What Would it not Take to Forestall CSS Tooltips From Overflowing? initially printed on CSS-Methods. It is best to get the publication and develop into a supporter.