Fullcalendar Angular - Tooltip.js CSS 未应用(CSS 封装问题)
Fullcalendar Angular - Tooltip.js CSS is not applied (CSS encapsulation issue)
我已经在 Fullcalendar 的 eventMouseEnter 和 eventMouseLeave 事件上添加了 Tooltip.js,但是工具提示没有样式,它只显示纯文本。见下图。
我在这里尝试使用 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。
默认情况下,title 元素是 textElement
并且没有额外的样式。如果要设置工具提示的样式,则必须在构造函数的 options 参数中启用 HTML 的使用。
handleEventMouseEnter(info) {
this.tooltip = new Tooltip(info.el, {
html: true,
title: "<b>" + info.event.title + "</b>",
placement: 'top'
});
}
上面的代码应该使工具提示文本加粗。
或者,您可以根据需要包装标题 HTML 样式。
这是由 CSS 封装问题引起的。根据 的回答。
添加
@Component({
selector: 'app-appointment',
templateUrl: './appointment.component.html',
styleUrls: ['./appointment.component.css'],
encapsulation: ViewEncapsulation.None
})
解决了我的问题。
我已经在 Fullcalendar 的 eventMouseEnter 和 eventMouseLeave 事件上添加了 Tooltip.js,但是工具提示没有样式,它只显示纯文本。见下图。
如何像下面的示例那样设置工具提示的样式?
这是我的代码:
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。
默认情况下,title 元素是 textElement
并且没有额外的样式。如果要设置工具提示的样式,则必须在构造函数的 options 参数中启用 HTML 的使用。
handleEventMouseEnter(info) {
this.tooltip = new Tooltip(info.el, {
html: true,
title: "<b>" + info.event.title + "</b>",
placement: 'top'
});
}
上面的代码应该使工具提示文本加粗。 或者,您可以根据需要包装标题 HTML 样式。
这是由 CSS 封装问题引起的。根据
添加
@Component({
selector: 'app-appointment',
templateUrl: './appointment.component.html',
styleUrls: ['./appointment.component.css'],
encapsulation: ViewEncapsulation.None
})
解决了我的问题。