feat: add @output() method to expose current tooltip status as boolean

README.md

@@ -79,6 +79,22 @@ Now you can use it:
 </button>
 ```
 
+#### Handle current status as boolean
+
+```html
+<button helipopper="Helpful Message" (helipopperShowing)="handleStatus($event)">
+  Click Me
+</button>
+```
+
+and on .ts
+
+```ts
+handleStatus($event: boolean): void {
+  console.log('show tooltip', $event);
+}
+```
+
 #### Text Overflow:
 
 ```html
@@ -237,6 +253,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

projects/ngneat/helipopper/src/lib/helipopper.directive.ts

@@ -118,6 +118,8 @@ export class HelipopperDirective implements OnDestroy {
   }
 
   @Output() helipopperClose = new Subject();
+  @Output() helipopperShowing = new Subject<boolean>();
+  // @Output() helipopperShowing = new EventEmitter<boolean>();
 
   private _content: Content;
   private _destroy = new Subject();
@@ -217,11 +219,13 @@ export class HelipopperDirective implements OnDestroy {
       onShow: instance => {
         this.zone.run(() => this.instance.setContent(this.resolveContent()));
         this.helipopperAllowClose && this.isPopper && this.addCloseButton(instance as InstanceWithClose);
+        this.helipopperShowing.next(true);
       },
       onHidden: instance => {
         this.helipopperAllowClose && this.isPopper && this.removeCloseButton(instance as InstanceWithClose);
         this.destroyView();
         this.helipopperClose.next();
+        this.helipopperShowing.next(false);
       },
       ...this.resolveTheme(),
       ...this.helipopperOptions

src/app/app.component.html

@@ -174,7 +174,14 @@ <h2>Sticky</h2>
 
 <div class="block">
   <h2>Custom Component</h2>
-  <button [helipopper]="comp" helipopperVariation="popper" (helipopperClose)="close()">Open component</button>
+  <button
+    [helipopper]="comp"
+    helipopperVariation="popper"
+    (helipopperClose)="close()"
+    (helipopperShowing)="handleStatus($event)"
+  >
+    Open component
+  </button>
 </div>
 
 <div class="block">

src/app/app.component.ts

@@ -112,4 +112,8 @@ export class AppComponent implements AfterViewInit {
       this.popperWithComp = this.service.open(this.inputNameComp, this.comp);
     }
   }
+
+  handleStatus($event: boolean): void {
+    console.log('show tooltip', $event);
+  }
 }