当鼠标悬停在fullcalendar Angular 6中的事件时显示弹出框答案

【问题标题】：Display a Popover when mouseover an event in fullcalendar Angular 6当鼠标悬停在fullcalendar Angular 6中的事件时显示弹出框
【发布时间】：2018-09-18 13:22:34
【问题描述】：

我在 Angular 6 项目中使用 Fullcalendar，我想在鼠标悬停事件时显示一个弹出框

使用此代码，我的控制台没有问题，但也没有显示任何内容

TS 文件：

    PopOver(elem): void {
    console.log(elem);
    $(elem.element).popover({
      title: 'the title',
      content: 'qsdqsd',
      placement: 'top',
      trigger: 'manual',
      delay: { show: 200, hide: 100 },
      animation: true,
      container: '#calendar',
      html: true,
    }).popover('show');
  }

HTML 文件：

 <div *ngIf="calendarOptions">
        <ng-fullcalendar #ucCalendar
                         [options]="calendarOptions"
                         (eventResize)="draging($event)"
                         (eventStartEditable)="true"
                         (eventDrop)="draging($event)"
                         (eventMouseover)="PopOver(this)"
                         (eventMouseout)="undisplay()"
        ></ng-fullcalendar>
      </div>

我尝试了许多其他解决方案，但没有请我需要一个答案，这对我很重要

【问题讨论】：

标签： angular fullcalendar mouseover popover

【解决方案1】：

我知道这篇文章迟到了，但我找到了解决方法。

我的 HTML

<div *ngIf="calendarOptions">
          <ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
              (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
      </div>

我的 eventClick 方法的打字稿

eventClick(model: any) {

var popTemplate = [
    '<div class="popover" style="max-width:600px;" >',
    '<div class="arrow"></div>',
    '<div class="popover-header">',
    '<button id="closepopover" type="button" class="close" aria-hidden="true">&times;</button>',
    '<h3 class="popover-title"></h3>',
    '</div>',
    '<div class="popover-content"></div>',
    '</div>'].join('');
    $('.popover').not(model.jsEvent.currentTarget).popover('hide');
    $(model.jsEvent.currentTarget).popover({
        title: 'the title',
        content: function () {
            return "This <em>rich</em>  <pre>html</pre> content goes inside popover";
        },
        template: popTemplate,
        placement: 'left',
        html: true,
        trigger: 'click',
        animation: true,
        container: 'body'
    }).popover('show');

}

我希望这对某人有所帮助

【讨论】：