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.
import { Button, DynamicPopover } from '@ensdomains/thorin'const Tooltip = ({content,placement,mobilePlacement,...props}: TooltipProps) => {const tooltipRef = React.useRef<HTMLDivElement>(null)const popover = (<TooltipPopover$mobilePlacement={mobilePlacement}$placement={placement}ref={tooltipRef}>{content}</TooltipPopover>)return DynamicPopover({popover,tooltipRef,placement,mobilePlacement,...props,})}
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 | number | 350 | 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 |