usePosition

usePosition is a positioning engine for aligning a <dialog> or <tooltip> with something else.

It is very similar to popper.

Usage

{ style, arrowStyle, placement } = usePosition(target, { anchor, arrow, placements, contain, scroll, active })

Arguments:

• target - Ref - Ref for the element to position
• anchor - Ref - Ref for the element to position against
• arrow - Ref - Ref for an arrow element
• contain - Ref - Ref for an element the target should be contained within
• placements - String[] - An array of possible positions. Can be topStart, top, topEnd, rightStart, right, rightEnd, bottomStart, bottom, bottomEnd, leftStart, left and/or leftEnd.
• scroll - Boolean - If true optimise the tooltip position while scrolling. Not recommended.
• active - Boolean - Default true. Set to false to disable tooltip positioning and events.

Returns:

• style - Object - Styles to apply to the target
• arrowStyle - Object - Styles to apply to the arrow
• placement - String - The placement the target is in

Styles

The library works by setting transform: translate(x, y) on the target and arrow. It expects the target, and arrow if used, to have position: absolute. The targets margins will be taken into account when positioning.

Sample styles are provided in the styles directory.