Fullcalendar Angular — CSS Tooltip.js не применяется (проблема инкапсуляции CSS)

Я добавил Tooltip.js к событиям Fullcalendar для eventMouseEnter и eventMouseLeave, но всплывающая подсказка не оформлена, она показывает просто текст. См. изображение ниже.

введите описание изображения здесь Я пытался использовать это пример здесь, но безрезультатно.

Как оформить всплывающую подсказку, как показано в следующем примере?

введите здесь описание изображения

Это мой код:

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
person grrigore    schedule 15.06.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это было вызвано проблемой инкапсуляции CSS. Согласно этому ответу.

Добавление

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

решил мою проблему.

person grrigore    schedule 16.06.2019

arrow_upward
1
arrow_downward

По умолчанию элемент title имеет номер textElement и не имеет дополнительного стиля. Если вы хотите изменить стиль всплывающей подсказки, вам необходимо включить использование HTML в параметре options конструктора.

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

Этот код выше должен сделать всплывающую подсказку полужирным шрифтом. Или вы можете обернуть HTML-стиль заголовка по своему усмотрению.

person Arshad    schedule 16.06.2019
comment
Это работает, но это не тот результат, который я хотел. Посмотрите на картинку выше, чтобы увидеть пример. Проблема в том, я думаю, что CSS не применяется. - person grrigore; 16.06.2019
comment
Мне удалось найти решение. Это была проблема инкапсуляции CSS. - person grrigore; 16.06.2019