This content originally appeared on Bram.us and was authored by Bramus!
Floating UI is a low-level library for positioning “floating” elements like tooltips, popovers, dropdowns, menus and more. Floating UI exposes primitives which enable a floating element to be positioned next to a given reference element while appearing in view for the user as best as possible. Features include overflow prevention (or collision awareness), placement flipping, and more.
import {computePosition, flip} from '@floating-ui/dom';
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
const {x, y} = await computePosition(button, tooltip, {
placement: 'top',
middleware: [flip()]
});
Object.assign(tooltip.style, {
left: `${x}px`,
top: `${y}px`,
});Floating UI →
Floating UI Source (GitHub) →
~
☝️ Did you know some folks from Microsoft are thinking about a proposal to allow Anchored Positioning using only CSS? It’s still a very early discussion, so nothing official yet …
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-12-13T00:03:10+00:00) Floating UI – Positioning for tooltips, popovers, dropdowns, and more. Retrieved from https://www.scien.cx/2021/12/13/floating-ui-positioning-for-tooltips-popovers-dropdowns-and-more/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.