title: React Bootstrap Popover in FullCalendar React
body: <p>I am using FullCalendar Library in React with react-bootstrap popover. I want to show popover when the event clicked on the FullCalendar. Here is my eventclicked function to show the popover.</p>
  
  <pre><code>EventDetail = ({ event, el, view }) =&gt; {
  
      let divId = 'test_' + event.id;
      const content = (
          &lt;OverlayTrigger trigger="click" placement="bottom" overlay={popover}&gt;
              &lt;div className="fc-content" id={divId}&gt;
                  &lt;div className="fc-title"&gt;{event.t0}
                      &lt;br /&gt;&lt;span className="f300"&gt;{event._def.extendedProps.t1}&lt;/span&gt;
  
                      &lt;div className="f300 breakWrd" style={{ whiteSpace: "pre-wrap", wordBreak: 'break-word' }}&gt;
                          {event._def.extendedProps.t3}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/OverlayTrigger&gt;
  
      )
      ReactDOM.render(content, el);
      return el;
  };
  </code></pre>
  
  <p>'popover' component defined as below,</p>
  
  <pre><code>const popover = (
      &lt;Popover id="popover-basic"&gt;
          &lt;Popover.Title as="h3"&gt;Popover right&lt;/Popover.Title&gt;
          &lt;Popover.Content&gt;
              And here's some &lt;strong&gt;amazing&lt;/strong&gt; content. It's very engaging.
              right?
      &lt;/Popover.Content&gt;
      &lt;/Popover&gt;
  );
  </code></pre>
  
  <p>When I click the event, aria-describedby="popover-basic" property generated in the div as below.</p>
  
  <pre><code>&lt;div class="fc-content" id="test_1258045" aria-describedby="popover-basic"&gt;
    &lt;div class="fc-title"&gt;Title1&lt;br /&gt;&lt;span class="f300"&gt;Time Show&lt;/span&gt;
      &lt;div class="f300 breakWrd" style="white-space: pre-wrap; word-break: break-word;"&gt;
        Event_Details
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And also 'popover' element is generated under 'body' Element.</p>
  
  <pre><code>&lt;div role="tooltip" x-placement="bottom" class="fade show popover bs-popover-bottom" id="popover-basic"
    style="position: absolute; top: 0px; left: 0px; right: auto; bottom: auto; transform: translate3d(945.5px, 277.5px, 0px);"
  &gt;
    &lt;div class="arrow" style="position: absolute; left: 0px; transform: translate3d(179.5px, 0px, 0px);" &gt;&lt;/div&gt;
    &lt;h3 class="popover-header"&gt;Popover right&lt;/h3&gt;
    &lt;div class="popover-body"&gt;
      And here's some &lt;strong&gt;amazing&lt;/strong&gt; content. It's very engaging. right?
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But its not showing up up the front. When I do the inspect element, it shows as below image. The popover content is rendered at the back of the Calendar. How Can I display it here? What went wrong here? Any Idea?</p>
  
  <p><a href="https://i.stack.imgur.com/Tgmrb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tgmrb.png" alt=""></a></p>