- Fully and easily customizable. It has a bunch of props, including animation, className, arrow visibility, etc. - Able to change dimensions depending on available space (if maxHeight and maxWidth not specified). - Able to choose better placement if there is no room (if guessBetterPosition = true, default false). - Able to follow trigger (if considerTriggerMotion = true, default false for better performance). - Able to change placement when content dimensions changed (if considerContentResizing = true, default false for better performance). - Able to detect trigger width and height and use them for content (useTriggerWidth, useTriggerHeight). - Considers window resizing. - Closes on scroll event of scroll container if closeOnScroll = true (default true), otherwise changes position. Use scrollHandlerMinDistance prop to specify min scrolled distance to call scroll handler. - Supports 12 different placements. - Able to close on remote click, enter and escape buttons press. - Able to open on hover, click, focus and contextMenu events. - Supports external visibility control (if isOpen specified). - Renders content into body or provided container. - Supports children and content functions and provides them with some useful props. - Accepts custom offset from default position. - Accepts custom mouse enter/leave delay if trigger is "hover". - Accepts custom trigger container display and tag. - Accepts arrowSize, arrowOffset and arrowPlacement for arrow customization. - Lazy initialization. Popover initializes on first trigger event.
$3
$3
`jsx import React from 'react' import Popover from '@idui/react-popover'
function Example() { return
} `
$3
Popover can follow trigger if considerTriggerMotion = true.
You can configure custom animation by defining framer-motion props. In this example used simple opacity animation, i.e. you won't see any jumping or movement. Live Example.
`jsx import React from 'react' import Popover from '@idui/react-popover'