title: Displaying popover after clicking on an event in react-big-calendar
body: <p>I created the <code>Event ()</code> function that it passes as a custom component to</p>
  
  <pre><code>&lt;Calendar components = {{
     event: Event
  }}/&gt;
  </code></pre>
  
  <p>Then in the <code>Event ()</code> function I create the variable <code>popoverClickRootClose</code>, in which I place the react-bootstrap<code>popover</code>. Then <code>popoverClickRootClose</code> passes to the component:</p>
  
  <pre><code>&lt;OverlayTrigger overlay = {popoverClickRootClose}&gt;
       &lt;div&gt; {event.title}&lt;/ div&gt;
  &lt;/ OverlayTrigger&gt;
  </code></pre>
  
  <p>After clicking in the event no popover appears. Could someone advise me what I am doing wrong?   </p>
  
  <p>Demo here: <a href="https://stackblitz.com/edit/react-umtvgs" rel="nofollow noreferrer">https://stackblitz.com/edit/react-umtvgs</a></p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import { Calendar, momentLocalizer } from 'react-big-calendar';
  import moment from 'moment';
  import 'react-big-calendar/lib/css/react-big-calendar.css';
  import {Overlay} from 'react-bootstrap';
  import {OverlayTrigger} from 'react-bootstrap';
  import {Popover} from 'react-bootstrap';
  
  const localizer = momentLocalizer(moment);
  
  function Event({ event }) {
    let popoverClickRootClose = (
      &lt;Popover id="popover-trigger-click-root-close" style={{ zIndex: 10000 }}&gt;
        &lt;strong&gt;Holy guacamole!&lt;/strong&gt; Check this info.
        &lt;strong&gt;{event.title}&lt;/strong&gt;
      &lt;/Popover&gt;
    );
  
    console.log(event);
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;OverlayTrigger id="help" trigger="click" rootClose container={this} placement="bottom" overlay={popoverClickRootClose}&gt;
            &lt;div&gt;{event.title}&lt;/div&gt;
          &lt;/OverlayTrigger&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  class App extends Component {
    constructor() {
      const now = new Date();
      const events = [
        {
            id: 0,
            title: 'All Day Event very long title',
            allDay: true,
            start: new Date(2019, 6, 0),
            end: new Date(2019, 6, 1),
            description: 'sdsdsdsdsdsdsdsd'
        },
        {
            id: 1,
            title: 'Long Event',
            start: new Date(2019, 3, 7),
            end: new Date(2019, 3, 10),
            description: 'yyyyyyyyyyyyyyyyyy'
        },
        {
            id: 2,
            title: 'Right now Time Event',
            start: now,
            end: now,
            description: 'cddffffffffdfdfdfd'
        },
      ]
      this.state = {
        events
      };
    }
  
    render() {
      return (
          &lt;div style={{ height: '500pt'}}&gt;
            &lt;Calendar
              events={this.state.events}
              startAccessor="start"
              endAccessor="end"
              defaultDate={moment().toDate()}
              localizer={localizer}
               components={{
                event: Event
              }}
            /&gt;
          &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>