React DOM offsetHeight before rendering
<p>I need to be able to position a React DOM element by its offsetHeight.</p>

<p>The problem is that I can't gather the offsetHeight of an element that hasn't been created yet (so the height cannot be passed to the render function as a parameter) and I also cannot calculate the height inside of the render function as noted in the React DOM refs docs:</p>

<blockquote>
  <p>Never access refs inside of any component's render method – or while any component's render method is even running anywhere in the call stack.</p>
</blockquote>

<p>The DOM element should render relative to an icon that is clicked to display it.</p>

<p>The component tree:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>|— FormInputGroup
  |— Label
    |— TooltipIcon
  |— Tooltip
  |— Input</code></pre>
</div>
</div>
</p>

<p>The render function for the tooltip-icon:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const TooltipIcon = ({ attribute, setCurrentTooltip }) =&gt; (
  &lt;Icon
    name="tooltip"
    style={{
      position: "relative",
      top: "1px",
      marginLeft: "10px",
      "cursor": "pointer",
    }}
    onClick={() =&gt; setCurrentTooltip(attribute)}
  /&gt;
)</code></pre>
</div>
</div>
</p>

<p>The render function:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const Tooltip = ({ title, content, setCurrentTooltip }) =&gt; (
  &lt;div className="popover"
    style={{
//      top: "-"+ ReactDOM.findDOMNode(this).offsetHeight +"px",
    }}
  &gt;
    &lt;h3 className="popover-title"&gt;{title}&lt;/h3&gt;
    &lt;div className="popover-close-button"
      onClick={() =&gt; setCurrentTooltip(null)}
    /&gt;
    &lt;div className="popover-content"&gt;{content}&lt;/div&gt;
  &lt;/div&gt;
)</code></pre>
</div>
</div>
</p>

<p>Here is the DOM element without the positioning:
<a href="http://i.stack.imgur.com/eKPBq.png" rel="noreferrer">not positioned</a></p>

<p>Here is how I would like the position to be rendered (with top: -(offsetHeight)px:
<a href="http://i.stack.imgur.com/isFe8.png" rel="noreferrer">positioned</a></p>