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
show
React.Element
Element placed in relation to 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.

Sometimes it's difficult to accurately position relative to another element on the page. Perhaps the surrounding markup and styles were not designed to accommodate an inserted Tooltip. Or perhaps there's a parent container that's position: relative. Both of these would be good cases for rendering through a React Portal. The component can take care of that for you. You just supply another independent DOM node elsewhere in your document.

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.