API reference
Interfaces
AttachedOverlay is a low level component for building tooltip, popover like attached floating elements.
IAttachedOverlayProps
interface IAttachedOverlayProps extends IOverlay { children: (isOpen: boolean) => JSX.Element;}
IOverlay
export interface IOverlay { // aria attribute role?: 'tooltip' | 'dialog' | 'menu' | 'listbox' | 'grid' | 'tree'; // for nested overlays nodeId?: string; // for nested overlays parentId?: string; // actual DOM id attribute portalId?: string; // for overlay placement (use custom for modal, drawer etc.) placement?: 'top' | 'bottom' | 'right' |'left' | 'bottom-end' | 'bottom-start' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start'; // triggers wont't work if you don't pass this true. interactive?: boolean; // determines if animations are enabled or not animations?: { open: Variant; // framer-motion type close: Variant; // framer-motion type }; // determines if animations are enabled or not (AnimatePresence) useMotion?: boolean; // portals your floating element outside the main app node usePortal?: boolean; // provides base styling for a fixed overlay element to dim content useBackdrop?: boolean; // provides flexible focus management for a floating element useFocusManager?: boolean; // determines if focus should be returned to previous element // useFocusManager should be true for this to work returnFocus?: boolean; // displaces the floating element from its core placement along the specified axes offset?: number; // moves the floating element along the specified px in order to keep it in view shift?: number; // trigger delay delay?: { open: number; close: number; }; // trigger element events use?: { click?: boolean; // adds click event listeners dismiss?: boolean; // adds listeners that dismiss (close the floating element. focus?: boolean; // adds focus event listeners hover?: boolean; // adds hover event listeners }; // your floating element (overlay) overlay: (close: () => void) => JSX.Element; // classes for floating element className?: string; // classes for floating element wrapper wrapperClassName?: string; // classes for floating element backdrop backdropClassName?: string;}