I am struggling to figure out how to position a React DOM element based on its offsetHeight.
The issue is that I cannot determine the offsetHeight of an element that hasn't been created yet (so the height cannot be passed as a parameter to the render function) and calculating the height inside the render function goes against the guidelines in the React DOM refs documentation:
Avoid accessing refs within a component's render method or while any render method is running elsewhere in the call stack.
The DOM element needs to be rendered relative to an icon that, when clicked, displays it.
The component tree structure is as follows:
|— FormInputGroup
|— Label
|— TooltipIcon
|— Tooltip
|— InputThe render function for TooltipIcon:
const TooltipIcon = ({ attribute, setCurrentTooltip }) => (
<Icon
name="tooltip"
style={{
position: "relative",
top: "1px",
marginLeft: "10px",
cursor: "pointer",
}}
onClick={() => setCurrentTooltip(attribute)}
/>
)The render function for Tooltip:
const Tooltip = ({ title, content, setCurrentTooltip }) => (
<div className="popover"
style={{
// top: "-"+ ReactDOM.findDOMNode(this).offsetHeight +"px",
}}
>
<h3 className="popover-title">{title}</h3>
<div className="popover-close-button"
onClick={() => setCurrentTooltip(null)}
/>
<div className="popover-content">{content}</div>
</div>
)Here is the current state of the DOM element without proper positioning: not positioned
This is how I envision the desired rendering with top: -(offsetHeight)px: positioned