Commits

Nicolai Olsen authored cab6a1d935c
Added 'primary' class.

Added title for tooltips. versioned-sections now utilizes tooltip titles.
No tags

src/app/tooltip/tooltip.directive.ts

Modified
1 1 import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
2 2 import {WindowService} from '../services/window.service';
3 3 import {DocumentService} from '../services/document.service';
4 4
5 5 @Directive({
6 6 selector: '[appTooltip]'
7 7 })
8 8 export class TooltipDirective {
9 + @Input() appTooltipTitle: string | undefined;
9 10 @Input() appTooltip: string | undefined;
10 11 @Input() placement: 'top' | 'bottom' | 'left' | 'right' | 'cursor' = 'bottom';
11 12 @Input() tooltipClasses: string | undefined;
12 13 @Input() delay = 0;
13 14 tooltip: HTMLElement | undefined;
14 15 offset = 0;
15 16 private timeout: number | undefined;
16 17 private window: Window;
17 18 private document: Document;
18 19 private mousePosition: MouseEvent | undefined;
38 39 if (!this.tooltip && this.placement === 'cursor') {
39 40 this.mousePosition = event;
40 41 }
41 42 }
42 43
43 44 @HostListener('mouseleave') onMouseLeave(): void {
44 45 if (this.timeout) { clearTimeout(this.timeout); }
45 46 if (this.tooltip) { this.hide(); }
46 47 }
47 48
49 + get tooltipTitle(): string | undefined {
50 + return this.appTooltipTitle;
51 + }
52 +
48 53 get tooltipText(): string | undefined {
49 54 return this.appTooltip;
50 55 }
51 56
52 57 public show(): void {
53 58 this.create();
54 59 this.setPosition();
55 60 this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
56 61 }
57 62
61 66 this.window.setTimeout(() => {
62 67 if (this.tooltip) {
63 68 this.renderer.removeChild(this.documentService.nativeDocument().body, this.tooltip);
64 69 this.tooltip = undefined;
65 70 }
66 71 }, 500);
67 72 }
68 73 }
69 74
70 75 create(): void {
71 - this.tooltip = this.renderer.createElement('span'); // TODO: understøt headers i tooltips
76 + this.tooltip = this.renderer.createElement('div');
77 + const tooltipHeader = this.renderer.createElement('h4');
78 + const tooltipContent = this.renderer.createElement('span');
79 +
80 + if (this.tooltipTitle != null) {
81 + this.renderer.appendChild(
82 + tooltipHeader,
83 + this.renderer.createText(this.tooltipTitle)
84 + );
85 + }
72 86
73 87 if (this.tooltipText != null) {
74 88 this.renderer.appendChild(
75 - this.tooltip,
89 + tooltipContent,
76 90 this.renderer.createText(this.tooltipText)
77 91 );
78 92 }
93 +
94 + this.renderer.appendChild(this.tooltip, tooltipHeader);
95 + this.renderer.appendChild(this.tooltip, tooltipContent);
79 96 this.renderer.appendChild(this.documentService.nativeDocument().body, this.tooltip);
80 97 this.renderer.addClass(this.tooltip, 'ng-tooltip');
81 98 this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
82 99 this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
83 100 this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
84 101 this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
85 102 this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
86 103 if (!!this.tooltipClasses) {
87 104 this.renderer.addClass(this.tooltip, this.tooltipClasses);
88 105 }

Everything looks good. We'll let you know here if there's anything you should know about.

Add shortcut