Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@floating-ui/core
Advanced tools
Positioning library for floating elements: tooltips, popovers, dropdowns, and more
The @floating-ui/core package is a low-level toolkit for creating floating elements on a web page, such as tooltips, popovers, dropdowns, and more. It provides the logic to position these elements in relation to a reference element, handling edge cases like viewport overflow and updates on scroll or resize.
Positioning floating elements
This feature allows you to position a floating element (like a tooltip or a dropdown) relative to a reference element on the page. The `computePosition` function calculates the best position based on the specified placement, such as 'bottom', and returns coordinates to position the floating element.
import {computePosition} from '@floating-ui/core';
async function positionElement(referenceElement, floatingElement) {
const {x, y} = await computePosition(referenceElement, floatingElement, {
placement: 'bottom'
});
Object.assign(floatingElement.style, {
left: `${x}px`,
top: `${y}px`,
});
}
Auto-placement
Auto-placement automatically chooses the best placement for a floating element when the preferred placement is not available. This is useful for dynamically positioned UI elements that need to adapt to different screen sizes or content changes.
import {autoPlacement} from '@floating-ui/core';
async function positionWithAutoPlacement(referenceElement, floatingElement) {
const {x, y, placement} = await computePosition(referenceElement, floatingElement, {
placement: 'bottom',
middleware: [autoPlacement()]
});
console.log('Chosen placement:', placement);
Object.assign(floatingElement.style, {
left: `${x}px`,
top: `${y}px`,
});
}
Detecting overflow
This feature allows you to detect if a floating element is overflowing its boundary (e.g., the viewport or a specific container). It's useful for adjusting the positioning or appearance of elements to prevent them from being partially hidden.
import {detectOverflow} from '@floating-ui/core';
async function checkOverflow(referenceElement, floatingElement) {
const overflow = await detectOverflow(referenceElement, {
boundary: document.body
});
console.log('Overflow values:', overflow);
}
Popper.js is a predecessor to @floating-ui/core and offers similar functionality for positioning floating elements. While Popper.js is widely used and has a large community, @floating-ui/core is its successor, designed to be more modular and lightweight.
Tippy.js is a tooltip and popover library that builds on top of Popper.js. It provides a higher-level abstraction for creating and managing tooltips, popovers, and dropdowns. Compared to @floating-ui/core, Tippy.js offers more out-of-the-box features for interaction and styling but is less flexible for low-level positioning needs.
This is the platform-agnostic core of Floating UI, exposing the main
computePosition
function but no platform interface logic.
FAQs
Positioning library for floating elements: tooltips, popovers, dropdowns, and more
The npm package @floating-ui/core receives a total of 10,104,333 weekly downloads. As such, @floating-ui/core popularity was classified as popular.
We found that @floating-ui/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.