close on click

Author: clouless

package.json

@@ -2,7 +2,7 @@
   "COMMENT": "THIS FILE WILL BE PARSED DURING BUILD. IT IS NOT THE ACTUAL PACKAGE FILE PUSHE TO NPMJS!",
   "name": "@cloukit/tooltip",
   "moduleId": "tooltip",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A simple tooltip component",
   "license": "MIT",
   "author": "codelcou.io",

src/components/tooltip.directive.ts

@@ -73,8 +73,9 @@ export class CloukitTooltipDirective {
   activate() {
     this._doActivate();
   }
-
+‚‚
   @HostListener('mouseleave')
+  @HostListener('click')
   deactivate() {
     this._doDeactivate();
   }

src/demo/demo.component.html

@@ -35,4 +35,13 @@
     cloukitTooltip="delicious german sausage"
     cloukitTooltipPlacement="bottom"
   >Bratwurst</button>
+  <br><br>
+  <span class="label">tooltip on a buton with click action:</span>
+  <a
+    href="#"
+    class="tooltipTrigger"
+    cloukitTooltip="delicious german sausage"
+    cloukitTooltipPlacement="bottom"
+    (click)="counter=counter+1"
+  >Bratwurst {{counter}}</a>
 </div>

src/demo/demo.component.ts

@@ -8,4 +8,6 @@ import { Component } from '@angular/core';
     '.label { display:inline-block; width:250px; }',
   ],
 })
-export class DemoComponent {}
+export class DemoComponent {
+  counter = 0;
+}