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

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

0 голосов
/ 15 июня 2019

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

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

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

enter image description here

Это мой код:

встречи.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();
  }
}

встречи.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 из примера.

Ответы [ 2 ]

1 голос
/ 16 июня 2019

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

Добавление 

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

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

1 голос
/ 16 июня 2019

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

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

Этот код выше долженсделать подсказку текст жирным .Или вы можете обернуть заголовок HTML-стилем так, как вам хочется.

...