title: How to position tooltip on the top of a barchart in rechart?
body: <p><strong>Problem:</strong>
  I have created a bar chart with a custom tooltip. Now What I need is to position tooltip on top of the bar not within the area of the chart. Like in this picture.</p>
  
  <p><a href="https://i.stack.imgur.com/QYyEZ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/QYyEZ.jpg" alt="enter image description here"></a></p>
  
  <p>This is how It looks like now.</p>
  
  <p><a href="https://i.stack.imgur.com/c835U.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/c835U.jpg" alt="enter image description here"></a></p>
  
  <p>Here I am providing how I organize my code.</p>
  
  <pre><code>import React, { Component } from "react";
  import {
    BarChart,
    Tooltip,
    Bar,
    Legend,
    ResponsiveContainer,
    Cell
  } from "recharts";
  
  import { Card, CardTitle, CardBody } from "reactstrap";
  
  import "./SessionDuration.css";
  
  const colors = ["#26a0a7", "#79d69f", "#f9ec86", "#ec983d"];
  
  const data = [
    {
      name: "Page A",
      pv: 2400,
      amt: 2400
    },
    {
      name: "Page B",
      pv: 1398,
      amt: 2210
    },
    {
      name: "Page C",
      pv: 9800,
      amt: 2290
    },
    {
      name: "Page D",
      pv: 3908,
      amt: 2000
    }
  ];
  
  const getTitleOfTooltip = (label) =&gt;{
    if (label ===  0) {
      return "&lt;=5 min";
    }
    if (label === 1) {
      return "5-30 min";
    }
    if (label === 2) {
      return "30-60 min";
    }
    if (label === 3) {
      return "&gt;60";
    }
  }
  const getIntroOfPage = label =&gt; {
    if (label ===  0) {
      return "Page A is about men's clothing";
    }
    if (label === 1) {
      return "Page B is about women's dress";
    }
    if (label === 2) {
      return "Page C is about women's bag";
    }
    if (label === 3) {
      return "Page D is about household goods";
    }
  };
  
  class SessionDuration extends Component {
    render() {
      return (
        &lt;Card className="session-duration-card"&gt;
          &lt;CardTitle className="session-duration-card-header"&gt;
            Session Duration
          &lt;/CardTitle&gt;
          &lt;CardBody&gt;
            &lt;ResponsiveContainer width="100%" height="100%" aspect={4.0 / 5.5}&gt;
              &lt;BarChart
                data={data}
                margin={{
                  top: 3,
                  right: 5,
                  left: 5,
                  bottom: 13
                }}
                barGap={10}
              &gt;
                &lt;Tooltip
                  coordinate={{ x: 0, y: 150 }}
                  content={&lt;CustomTooltip /&gt;}
                /&gt;
  
                &lt;Bar dataKey="pv" fill="#8884d8"&gt;
                  {data.map((entry, index) =&gt; (
                    &lt;Cell key={`cell-${index + 1}`} fill={colors[index]} /&gt;
                  ))}
                &lt;/Bar&gt;
              &lt;/BarChart&gt;
            &lt;/ResponsiveContainer&gt;
          &lt;/CardBody&gt;
        &lt;/Card&gt;
      );
    }
  }
  
  export default SessionDuration;
  
  const CustomTooltip = ({ active, payload, label }) =&gt; {
    if (active) {
      return (
        &lt;div className="session-duration-tooltip"&gt;
          &lt;p className="session-duration-tooltip-label"&gt;{getTitleOfTooltip(label)}&lt;/p&gt;
          &lt;p className="session-duration-tooltip-intro"&gt;
            {getIntroOfPage(label)}
          &lt;/p&gt;
          &lt;p className="session-duration-tooltip-desc"&gt;
            Anything you want can be displayed here.
          &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  
    return null;
  };
  </code></pre>
  
  <p>Here I am providing my CSS file.</p>
  
  <pre><code>@media only screen and (min-width: 1024px) {
    .session-duration-card {
      margin-top: 14.5%;
      margin-left: -44%;
      width: 190% !important;
      border-radius: none !important;
      height: 86%
  
    }
  
    .session-duration-card-header {
      font-weight: 700;
      text-align: left;
      padding-left: 6%
    }
  
    .session-duration-tooltip {
      width: 210%;
    }
  
    .session-duration-tooltip-label {
      font-weight: 700;
      font-size: 11px;
    }
  }
  
  @media only screen and (min-width: 308px) and (max-width: 1024px) {
    .session-duration-card {
      margin-top: 5%;
      margin-left: 3.2%;
      width: 94.5%;
      border-radius: none !important;
    }
  
    .session-duration-card-header {
      font-weight: 700;
      text-align: center;
    }
  }
  
  @media only screen and (min-width: 1666px) {
    .session-duration-card {
      margin-top: 11%;
      margin-left: -13%;
      width: 190% !important;
      height: 97%;
      border-radius: none !important;
    }
  
    .session-duration-card-header {
      font-weight: 700;
      text-align: center;
    }
  }
  </code></pre>
  
  <p>I tried a lot to find a solution for my problem but I was unable to get it done can someone help me by modifying my code to get this work done. Thank you very much.</p>