Positioning
Placement, alignment, offsets, collision handling, and portals.
Typography is what language looks like. Select a few words here, then change the options to see where the popover goes.
import { HighlightPopover } from "@omsimos/react-highlight-popover";const renderPopover = ({ selection }) => ( <div className="rounded-lg border bg-white p-3 shadow-lg"> {selection} </div>);export function Article() { return ( <HighlightPopover renderPopover={renderPopover} offset={{ y: 8 }} > <p>Select some text in this paragraph.</p> </HighlightPopover> );}Placement and alignment
The popover appears below the selection by default. Use placement="top" to place it above. Use alignment to line it up with the left edge, center, or right edge of the selection.
<HighlightPopover placement="top" alignment="left" renderPopover={renderPopover}>
{children}
</HighlightPopover>Offset
offset.y is the gap between the selection and the popover. offset.x moves the popover to the right.
<HighlightPopover offset={{ x: 0, y: 8 }} renderPopover={renderPopover}>
{children}
</HighlightPopover>Prefer offset over margins
Margins on your popover content stay on the same side when the popover flips. Use offset so the gap is always between the selection and the popover.
Collision handling
When the popover doesn't fit in the viewport, it flips to the other side of the selection and shifts horizontally to stay on screen. Set collisionPadding to change the minimum distance from the viewport edges, or avoidCollisions={false} to turn this off.
The popover element has a data-placement attribute with the placement after flipping. renderPopover and useHighlightPopover also return it as placement. See the arrow example.
Following the selection
The popover follows the selection when the page scrolls, the window resizes, the content reflows, or the popover's own size changes.
Portals
The component renders the popover inside the wrapper element. If an ancestor has overflow: hidden, render the popover in a portal so the ancestor can't clip it:
This box has overflow: hidden. Select this text with and without the portal.
<HighlightPopover portal renderPopover={renderPopover}>
{children}
</HighlightPopover>portal also accepts an element to render into. A portalled popover uses position: fixed, so the target element shouldn't have a transform.