floaties v1.2.1

floaties

Simple helpers for creating popups.

• Snap any popup corner to any target corner
• Uses bottom, height, left, right, top, and width to keep the popup fully on-screen at all times
  • Combine with overflow: auto; in the popup element to make sure content is always available.

snap

Mutates input popup element, setting styles required to achieve desired popup position relative to target.

import { snap } from 'floaties';

const popupEl = document.querySelector('.my-popup');
const targetEl = document.querySelector('.my-target');

snap({
  popupEl,
  targetEl,
});

getStyle

Returns object with styles required to achieve desired popup position relative to target. Popup position defaults to top-left of popup aligned with top-left of target.

import { getStyle } from 'floaties';

const popupEl = document.querySelector('.my-popup');
const targetEl = document.querySelector('.my-target');

const style = getStyle({
  popupEl,
  targetEl,
});

Options