Fullcalendar Angular - Tooltip.js CSS is not applied (CSS encapsulation issue)

Question

I've added Tooltip.js on Fullcalendar's events for eventMouseEnter and eventMouseLeave, but the Tooltip is not styled, it shows just a plain text. See the image below.

I have tried to use this example here, but with no results.

How can I style the Tooltip like the following example?

This is my code:

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: it seems the CSS is not applying. I've used the CSS from the example.

grrigore · Accepted Answer · 2019-06-16 11:36:16Z

3

This was caused by a CSS encapsulation issue. According to this answer.

Adding

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

solved my problem.

answered Jun 16, 2019 at 11:36

grrigore

1,1102 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arshad · Accepted Answer · 2019-06-16 07:52:12Z

1

By default, the title element is textElement and doesn't have extra styling. If you want to style the tooltip, then you have to enable the use of HTML in the options parameter of the constructor.

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

This code above should make the tooltip text bold. Or, you could wrap the title HTML styling as you want.

answered Jun 16, 2019 at 7:52

Arshad

2283 silver badges10 bronze badges

2 Comments

grrigore Over a year ago

This is working, but it's not the result I wanted. Check the picture above to see an example. The problem is, I think, that the CSS is not applying.

grrigore Over a year ago

I managed to find a solution. It was a CSS encapsulation issue.

Collectives™ on Stack Overflow

Fullcalendar Angular - Tooltip.js CSS is not applied (CSS encapsulation issue)

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related