React Bootstrap Popover in FullCalendar React

Question

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.

EventDetail = ({ event, el, view }) => {

    let divId = 'test_' + event.id;
    const content = (
        <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
            <div className="fc-content" id={divId}>
                <div className="fc-title">{event.t0}
                    <br /><span className="f300">{event._def.extendedProps.t1}</span>

                    <div className="f300 breakWrd" style={{ whiteSpace: "pre-wrap", wordBreak: 'break-word' }}>
                        {event._def.extendedProps.t3}
                    </div>
                </div>
            </div>
        </OverlayTrigger>

    )
    ReactDOM.render(content, el);
    return el;
};

'popover' component defined as below,

const popover = (
    <Popover id="popover-basic">
        <Popover.Title as="h3">Popover right</Popover.Title>
        <Popover.Content>
            And here's some <strong>amazing</strong> content. It's very engaging.
            right?
    </Popover.Content>
    </Popover>
);

When I click the event, aria-describedby="popover-basic" property generated in the div as below.

<div class="fc-content" id="test_1258045" aria-describedby="popover-basic">
  <div class="fc-title">Title1<br /><span class="f300">Time Show</span>
    <div class="f300 breakWrd" style="white-space: pre-wrap; word-break: break-word;">
      Event_Details
    </div>
  </div>
</div>

And also 'popover' element is generated under 'body' Element.

<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);"
>
  <div class="arrow" style="position: absolute; left: 0px; transform: translate3d(179.5px, 0px, 0px);" ></div>
  <h3 class="popover-header">Popover right</h3>
  <div class="popover-body">
    And here's some <strong>amazing</strong> content. It's very engaging. right?
  </div>
</div>

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?

Answer 1

I also had to use react-bootstrap popover with fullcalendar. Here is my code

eventRender={(info) => {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">{info.event.title}</Popover.Title>
      <Popover.Content>
        Lead Auditor: <br /> 

      </Popover.Content>
    </Popover>
  );

  let evtId = "event-" + info.event.id;
  const content = (
    <OverlayTrigger placement="bottom" overlay={popover}>
        <div className="fc-content" id={evtId}>
          <span className="fc-title">{info.event.title}</span>
        </div>
    </OverlayTrigger>
  );

  ReactDOM.render(content, info.el);
}}