DynamicPopover
Abstracts the positioning of popover elements so that they are visible on the screen. You probably want to use Tooltip instead of using this directly.
name | type | default | description |
|---|---|---|---|
| additionalGap | number | 0 | Add to the default gap between the popover and its target |
| align | "start" | "center" | "end" | center | Aligns the popover |
| anchorRef * Required | RefObject<HTMLElement> | - | The id of the target element the tooltip will emerge from |
| animationFn | DynamicPopoverAnimationFunc | - | A function that returns string of the css state for open and closed popover |
| hideOverflow | boolean | - | Hides the overflow of the content |
| isOpen | boolean | - | If this is not undefined, popover becomes externally controlled |
| mobilePlacement | "top" | "right" | "bottom" | "left" | top | The side and alignment of the popover in relation to the target on mobile screen sizes |
| mobileWidth | string | number | 150 | Width of the DynamicPopover on mobile |
| placement | "top" | "right" | "bottom" | "left" | top | The side and alignment of the popover in relation to the target |
| popover * Required | ReactElement<PopoverProps, string | JSXElementConstructor<any>> | - | A react node that has includes the styling and content of the popover |
| onShowCallback | () => void | - | Function that will be called when the DynamicPopover is shown |
| transitionDuration | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | 300 | The duration of the transition |
| useIdealPlacement | boolean | false | Dynamic popover will switch sides if there is not enough room |
| width | string | number | 250 | Width of the DynamicPopover |
