Fullcalendar Angular - Tooltip.js CSS 未应用（CSS 封装问题）答案

【问题标题】：Fullcalendar Angular - Tooltip.js CSS is not applied (CSS encapsulation issue)Fullcalendar Angular - Tooltip.js CSS 未应用（CSS 封装问题）
【发布时间】：2019-10-29 22:02:36
【问题描述】：

我在 Fullcalendar 的 eventMouseEnter 和 eventMouseLeave 事件上添加了 Tooltip.js，但 Tooltip 没有样式，它只显示纯文本。见下图。

我在这里尝试使用this 示例，但没有结果。

如何设置工具提示的样式，如下例所示？

这是我的代码：

appointment.component.ts

import { Component, ViewChild } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';
import { EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGrigPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import roLocale from '@fullcalendar/core/locales/ro';
import Tooltip from 'tooltip.js'

@Component({
  selector: 'app-appointment',
  templateUrl: './appointment.component.html',
  styleUrls: ['./appointment.component.css']
})

export class AppointmentComponent {
  tooltip: Tooltip;

  @ViewChild('calendar') calendarComponent: FullCalendarComponent; // the #calendar in the template
  calendarLocale = roLocale;
  calendarVisible = true;
  calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
  calendarWeekends = true;
  calendarEvents: EventInput[] = [
    { title: 'Cod: #123124124', description: "TEXT", start: new Date(), customRender: true },
  ];

  handleEventMouseEnter(info) {
    this.tooltip = new Tooltip(info.el, {
      title: info.event.title,
      placement: 'top'
    });
  }
  handleEventMouseLeave(info) {
    this.tooltip.dispose();
  }
}

appointment.component.html

<app-navbar></app-navbar>
<full-calendar #calendar defaultView="dayGridMonth"
    [header]="{left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'}"
    [plugins]="calendarPlugins" [weekends]="calendarWeekends" [events]="calendarEvents" [locale]="calendarLocale"
    (eventMouseEnter)="handleEventMouseEnter($event)"
    (eventMouseLeave)="handleEventMouseLeave($event)"></full-calendar>

LE：似乎没有应用 CSS。我使用了示例中的 CSS。

【问题讨论】：

标签： javascript angular fullcalendar tooltip fullcalendar-4

【解决方案1】：

默认情况下，title 元素是textElement 并且没有额外的样式。如果要设置工具提示的样式，则必须在构造函数的 options 参数中启用 HTML。

  handleEventMouseEnter(info) {
    this.tooltip = new Tooltip(info.el, {
      html: true,
      title: "<b>" + info.event.title + "</b>",
      placement: 'top'
    });
  }

上面的这段代码应该使工具提示文本加粗。或者，您可以根据需要包装标题 HTML 样式。

【讨论】：

这行得通，但这不是我想要的结果。查看上面的图片以查看示例。我认为问题在于 CSS 没有应用。
我设法找到了解决方案。这是一个 CSS 封装问题。

【解决方案2】：

这是由 CSS 封装问题引起的。根据this 回答。

添加

@Component({
  selector: 'app-appointment',
  templateUrl: './appointment.component.html',
  styleUrls: ['./appointment.component.css'],
  encapsulation: ViewEncapsulation.None
})

解决了我的问题。

【讨论】：