Skip to content

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,
})
}

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
Edit on GitHub