title: How to place the tool tip of recharts charts with a fixed position inside a div?
body: <p>I have a div with a <code>relative</code> position and inside this a chart from the recharts library is placed. 
  When the mouse point is hovered on the edges of the chart, the tooltip gets cut by the frame of the div. The parent div which the chart is placed has a relative position, So i gave the tooltip a fixed position, so that it would come on top of the parent div without getting cut by the frame of the div. But the tooltip doesn't take the position fixed according to the parent div instead takes the browser's view port and adjusts the position as fixed. </p>
  
  <pre><code>.parent-div {
    position: relative; 
    cursor: default; 
    width: 313px; 
    height: 240px;
  }
  
  .tooltip {
    pointer-events: none; 
    position: fixed; 
    top: 0px;
  }
  </code></pre>
  
  <pre><code>&lt;Tooltip
      cursor={{ fill: "#F2EFED" }}
      content={&lt;CustomTooltip /&gt;}
      formatter={value =&gt; new Intl.NumberFormat("en").format(value)}
  /&gt;
  
  </code></pre>
  
  <pre><code>function CustomTooltip({ payload, label, active }) {
      if (active) {
          return (
            &lt;div className={styles.customtooltip}&gt;
              {!payload[0].payload.extra &amp;&amp; &lt;h6 className={styles.label}&gt;{`${label} : ${payload[0].value}`}&lt;/h6&gt;}
              Intl.NumberFormat("en").format(`${payload[0].value}`)}&lt;/h6&gt;
              )}
            &lt;/div&gt;
          );
        }
  </code></pre>
  
  <p>current result : The tooltip of the chart gets placed on the top of the 
                   screen </p>
  
  <p>expected result : tooltip should be placed inside the parent div with a 
                    fixed position.</p>
  
  <p>Is it possible to achieve this just through css or is there something that i've missed in the recharts library ? </p>
  
  <p>Help would be greatly appreciated.</p>