feat(dayView): add tooltips to events

BREAKING CHANGE: day view events now have tooltips by default

Closes #75

Author: Matt Lewis

src/components/day/calendarDayView.component.ts

@@ -34,6 +34,7 @@ const SEGMENT_HEIGHT: number = 30;
             *ngFor="let dayEvent of view?.events"
             [dayEvent]="dayEvent"
             [hourSegments]="hourSegments"
+            [tooltipPlacement]="tooltipPlacement"
             [eventSnapSize]="eventSnapSize"
             (eventClicked)="eventClicked.emit({event: dayEvent.event})"
             (eventResized)="eventTimesChanged.emit($event)">
@@ -114,6 +115,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() eventSnapSize: number = 30;
 
+  /**
+   * The placement of the event tooltip
+   */
+  @Input() tooltipPlacement: string = 'top';
+
   /**
    * Called when an event title is clicked
    */

src/components/day/calendarDayViewEvent.component.ts

@@ -18,6 +18,8 @@ import addMinutes from 'date-fns/add_minutes';
       [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
       [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
       [ngClass]="dayEvent.event.cssClass"
+      [mwlCalendarTooltip]="dayEvent.event | calendarEventTitle:'dayTooltip'"
+      [tooltipPlacement]="tooltipPlacement"
       mwlResizable
       [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"
       [resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"
@@ -41,6 +43,8 @@ export class CalendarDayViewEventComponent {
 
   @Input() eventSnapSize: number;
 
+  @Input() tooltipPlacement: string;
+
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();
 
   @Output() eventResized: EventEmitter<any> = new EventEmitter();

src/providers/calendarEventTitle.provider.ts

@@ -22,4 +22,8 @@ export class CalendarEventTitle {
     return event.title;
   }
 
+  dayTooltip(event: CalendarEvent): string {
+    return event.title;
+  }
+
 }

test/calendarDayView.component.spec.ts

@@ -323,4 +323,57 @@ describe('CalendarDayViewComponent component', () => {
     });
   });
 
+  it('should show a tooltip on mouseover of the event', () => {
+
+    const fixture: ComponentFixture<CalendarDayViewComponent> = TestBed.createComponent(CalendarDayViewComponent);
+    eventTitle.dayTooltip = (event: CalendarEvent) => {
+      return `title: ${event.title}`;
+    };
+    fixture.componentInstance.viewDate = new Date('2016-06-01');
+    fixture.componentInstance.events = [{
+      start: new Date('2016-05-30'),
+      end: new Date('2016-06-02'),
+      title: 'foo <b>bar</b>',
+      color: {
+        primary: 'blue',
+        secondary: ''
+      }
+    }];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
+    triggerDomEvent('mouseenter', event);
+    fixture.detectChanges();
+    const tooltip: Element = document.body.querySelector('.cal-tooltip');
+    expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal('title: foo <b>bar</b>');
+    expect(tooltip.classList.contains('cal-tooltip-top')).to.be.true;
+    triggerDomEvent('mouseleave', event);
+    fixture.detectChanges();
+    expect(document.body.querySelector('.cal-tooltip')).not.to.be.ok;
+
+  });
+
+  it('should disable the tooltip', () => {
+
+    const fixture: ComponentFixture<CalendarDayViewComponent> = TestBed.createComponent(CalendarDayViewComponent);
+    eventTitle.dayTooltip = () => '';
+    fixture.componentInstance.viewDate = new Date('2016-06-01');
+    fixture.componentInstance.events = [{
+      start: new Date('2016-05-30'),
+      end: new Date('2016-06-02'),
+      title: 'foo <b>bar</b>',
+      color: {
+        primary: 'blue',
+        secondary: ''
+      }
+    }];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
+    triggerDomEvent('mouseenter', event);
+    fixture.detectChanges();
+    expect(document.body.querySelector('.cal-tooltip')).not.to.be.ok;
+
+  });
+
 });