tooltip with html OK

package.json

@@ -46,4 +46,4 @@
     "tslint": "~5.11.0",
     "typescript": "~3.2.2"
   }
-}
+}

src/app/app.component.html

@@ -1,3 +1,9 @@
+<app-componentWithContentOrNot>
+  <button [c3Tooltip]="content">Sourie !</button>
+  <c3-tooltip #content="c3Tooltip">
+    Bonjour, je suis le content avec du <strong>html !!!</strong>
+  </c3-tooltip>
+</app-componentWithContentOrNot>
 <p>message</p>
 <p>message</p>
 <p>message</p>
@@ -7,13 +13,7 @@
 <p>message</p>
 <p>message</p>
 <p>message</p>
-<p>message</p>
-
-<app-componentWithContentOrNot>
-	<button [c3Tooltip]="content">Sourie !</button>
-	<c3-tooltip #content="c3Tooltip" >
-		<div>
-			Bonjour, je suis le content avec du <strong>html !!!</strong>
-		</div>
-	</c3-tooltip>
-</app-componentWithContentOrNot>
+<p [c3Tooltip]="another">message</p>
+<c3-tooltip #another="c3Tooltip">
+  Bonjour, je suis une tooltip mis sur un p avec du <strong>html !!!</strong>
+</c3-tooltip>

src/app/c3-tooltip/c3-tooltip.component.css

@@ -0,0 +1,6 @@
+.c3-tooltip-panel {
+  background-color: #292929;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+}

src/app/c3-tooltip/c3-tooltipTrigger.directive.ts

@@ -1,133 +1,86 @@
 import { Directive, forwardRef, Input, AfterViewInit, ElementRef, ViewContainerRef, OnDestroy, NgZone } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { C3Tooltip } from './c3-tooltip.component';
-import { Overlay, OverlayRef, OverlayConfig, PositionStrategy, FlexibleConnectedPositionStrategy, ConnectedPosition } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, ScrollDispatcher, OverlayRef } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 import { TemplatePortal } from '@angular/cdk/portal';
 
 export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
-	provide: NG_VALUE_ACCESSOR,
-	useExisting: forwardRef(() => C3TooltipTrigger),
-	multi: true
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => C3TooltipTrigger),
+  multi: true
 };
 
 @Directive({
-	selector: '[c3Tooltip]',
-	exportAs: 'c3TooltipTrigger',
-	providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
+  selector: '[c3Tooltip]',
+  exportAs: 'c3TooltipTrigger',
+  providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
 })
 export class C3TooltipTrigger implements AfterViewInit, OnDestroy {
-	private _overlayRef: OverlayRef | null;
-	private _portal: TemplatePortal;
-	private _positionStrategy: FlexibleConnectedPositionStrategy;
-  private _overlayAttached: boolean = false;
+  overlayRef: OverlayRef | null;
 
-	@Input('c3Tooltip') tooltip: C3Tooltip;
+  @Input('c3Tooltip') tooltip: C3Tooltip;
 
-	@Input('c3TooltipDisabled') disabled: Boolean = false;
+  @Input('c3TooltipDisabled') disabled: Boolean = false;
 
-	/** The default delay in ms before showing the tooltip after show is called */
-	@Input('c3TooltipShowDelay') showDelay = 0;
+  /** The default delay in ms before showing the tooltip after show is called */
+  @Input('c3TooltipShowDelay') showDelay = 0;
 
-	/** The default delay in ms before hiding the tooltip after hide is called */
-	@Input('c3TooltipHideDelay') hideDelay = 0;
+  /** The default delay in ms before hiding the tooltip after hide is called */
+  @Input('c3TooltipHideDelay') hideDelay = 0;
 
-	private _manualListeners = new Map<string, EventListenerOrEventListenerObject>();
+  private _manualListeners = new Map<string, EventListenerOrEventListenerObject>();
 
-	constructor(
-		private _element: ElementRef<HTMLElement>,
-		private _overlay: Overlay,
-		platform: Platform,
-		private _ngZone: NgZone,
-		private _viewContainerRef: ViewContainerRef) {
-		if (!platform.IOS && !platform.ANDROID) {
-			this._manualListeners
-				.set('mouseenter', () => this.show())
-				.set('mouseleave', () => this.hide());
-		}
-	}
-
-	ngAfterViewInit() {
-		this._manualListeners.forEach((listener, event) => this._element.nativeElement.addEventListener(event, listener));
-	}
-
-	ngOnDestroy() {
-		this._manualListeners.forEach((listener, event) => {
-			this._element.nativeElement.removeEventListener(event, listener);
-		});
-		this._manualListeners.clear();
-	}
-
-	show(delay: number = this.showDelay) {
-		console.log('show')
-		let overlayRef = this._overlayRef;
-
-		if (!overlayRef) {
-			this._portal = new TemplatePortal(this.tooltip.template, this._viewContainerRef);
-			overlayRef = this._overlay.create(this._getOverlayConfig());
-			this._overlayRef = overlayRef;
-		}
-
-		if (overlayRef && !overlayRef.hasAttached()) {
-			overlayRef.attach(this._portal);
-			this._overlayAttached = true;
+  constructor(
+    private _element: ElementRef<HTMLElement>,
+    private _overlay: Overlay,
+    platform: Platform,
+    private _ngZone: NgZone,
+    private _scrollDispatcher: ScrollDispatcher,
+    private _viewContainerRef: ViewContainerRef) {
+    if (!platform.IOS && !platform.ANDROID) {
+      this._manualListeners
+        .set('mouseenter', () => this.show())
+        .set('mouseleave', () => this.hide());
     }
-	}
-	
-	get panelOpen(): boolean {
-    return this._overlayAttached;
   }
 
-	hide() {	
-		if (!this._overlayAttached) {
-			return;
-		}
-	
-		if (this._overlayRef && this._overlayRef.hasAttached()) {
-			this._overlayRef.detach();
-		}
-	}
-	
-	private _getOverlayConfig(): OverlayConfig {
-		return new OverlayConfig({
-			positionStrategy: this._getOverlayPosition(),
-			width: this._element.nativeElement.getBoundingClientRect().width
-		});
-	}
-
-	private _getOverlayPosition(): PositionStrategy {
-		const strategy = this._overlay.position()
-			.flexibleConnectedTo(this.tooltip.template.elementRef)
-			.withFlexibleDimensions(true)
-			.withPush(false)
-			.withViewportMargin(8);
+  ngAfterViewInit() {
+    this._manualListeners.forEach((listener, event) => this._element.nativeElement.addEventListener(event, listener));
+  }
 
-		this._setStrategyPositions(strategy);
-		this._positionStrategy = strategy;
-		return strategy;
-	}
-	private _setStrategyPositions(positionStrategy: FlexibleConnectedPositionStrategy) {
-		const belowPosition: ConnectedPosition = {
-			originX: 'start',
-			originY: 'bottom',
-			overlayX: 'start',
-			overlayY: 'top'
-		};
-		const abovePosition: ConnectedPosition = {
-			originX: 'start',
-			originY: 'top',
-			overlayX: 'start',
-			overlayY: 'bottom',
+  ngOnDestroy() {
+    this._manualListeners.forEach((listener, event) => {
+      this._element.nativeElement.removeEventListener(event, listener);
+    });
+    this._manualListeners.clear();
+  }
 
-			// The overlay edge connected to the trigger should have squared corners, while
-			// the opposite end has rounded corners. We apply a CSS class to swap the
-			// border-radius based on the overlay position.
-		};
+  show() {
+    const overlayRef = this._overlay.create(this.getOverlayConfig());
+    const portal = new TemplatePortal(this.tooltip.template, this._viewContainerRef);
+    overlayRef.attach(portal);
 
-		let positions: ConnectedPosition[];
+    this.overlayRef = overlayRef;
+  }
 
-		positions = [belowPosition, abovePosition];
+  hide() {
+    this.overlayRef.detach();
+  }
 
-		positionStrategy.withPositions(positions);
-	}
+  private getOverlayConfig(): OverlayConfig {
+    const positionStrategy = this._overlay.position()
+      .flexibleConnectedTo(this._element)
+      .withPositions([{
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+      }])
+      .withViewportMargin(8);
+
+    return new OverlayConfig({
+      positionStrategy
+    })
+  }
 }

src/styles.scss

@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/cdk/overlay-prebuilt.css';