Position

The Position component is a utility meant to help one control position of elements relative to other elements, for example, tooltips above a button.

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
children
Required
React.Element
Target element something will be relative to
inNode
HTMLElement
specific node for portal rendering
document.body
show
React.Element
Element placed in relation to target
target
ref
reference to custom target
when
boolean
Conditional rendering of positioned element
true

Positioning with the component

There are several position-specific components for adjusting the relative positioning of things like Tooltips around target elements.

Position always renders in a portal, defaulting to document.body. It is often desirable to provide your own node to render within. Use the inNode prop to pass an element reference.

The most important bits of this utility are available in pure JavaScript. To use, import the /js part of the utility.

Use the JavaScript function to get the positioning style desired.

Tooltip
Open an issue