title: how to programmatically add ngBootstrap popover to element?
body: <p>I am currently working on a calendar in my angular v8 application.</p>
  <p>This is the plugin I use: <a href="https://fullcalendar.io" rel="nofollow noreferrer">https://fullcalendar.io</a></p>
  <p>this is the component which I include in my html template:</p>
  <pre><code>    &lt;full-calendar
          defaultView=&quot;dayGridMonth&quot;
          [editable]=&quot;true&quot;
          [eventLimit]=&quot;5&quot;
          [nowIndicator]=&quot;true&quot;
          [slotLabelFormat]=&quot;timeFormat&quot;
          [eventTimeFormat]=&quot;timeFormat&quot;
          [eventClassName]=&quot;'fc-event-brand'&quot;
          [minTime]=&quot;'08:00:00'&quot;
          [maxTime]=&quot;'24:00:00'&quot;
          [header]=&quot;{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth, timeGridWeek, timeGridDay, listWeek'
          }&quot;
          [plugins]=&quot;calendarPlugins&quot;
          [events]=&quot;calendarEvents&quot;
          (eventMouseEnter)=&quot;showPopover($event)&quot;
          (eventMouseLeave)=&quot;hidePopover($event)&quot;
          (eventRender)=&quot;renderTooltip($event)&quot;&gt;&lt;/full-calendar&gt;
  </code></pre>
  <p>But how can I add a ngBootstrap popover or tooltip to an element?</p>
  <p>this is the renderTooltip():</p>
  <pre><code>renderTooltip(event) {
      // bind ngBootstrap tooltip or popover to $event.el
  }
  </code></pre>