Adding click handler to open tooltip (#1057)

cypress/e2e/dialogs/tooltips.cy.ts

@@ -1,18 +1,37 @@
-describe('Large Format Dialog', () => {
+describe('Tooltips', () => {
   before(() => {
     cy.visit('/tooltip');
     cy.get('.page-loader').should('not.exist', { timeout: 20000 });
   });
 
-  beforeEach(() => {
-    cy.get('ngx-section [ngx-tooltip]').first().as('CUT');
+  describe('Tooltip', () => {
+    beforeEach(() => {
+      cy.get('ngx-section [ngx-tooltip]').first().as('CUT');
+    });
+
+    it('should show tooltip', () => {
+      cy.get('@CUT').whileHovering(() => {
+        cy.root().closest('body').find('ngx-tooltip-content').should('exist');
+        cy.root().closest('body').find('ngx-tooltip-content').should('contain.text', 'Phishing Attack');
+      });
+      cy.get('ngx-tooltip-content').should('exist');
+    });
   });
 
-  it('should show tooltip', () => {
-    cy.get('@CUT').whileHovering(() => {
-      cy.root().closest('body').find('ngx-tooltip-content').should('exist');
-      cy.root().closest('body').find('ngx-tooltip-content').should('contain.text', 'Phishing Attack');
+  describe('Tooltip - Popover click', () => {
+    it('should toggle on click', () => {
+      cy.dataCy('popover-click').as('BUTTON');
+      cy.get('@BUTTON').scrollIntoView();
+      cy.get('@BUTTON').whileHovering(() => {
+        // should not be visible on-hover
+        cy.root().closest('body').get('.popover-custom').should('not.exist');
+      });
+      cy.get('@BUTTON').click();
+      // should be visible on first click
+      cy.get('.popover-custom').should('exist');
+      cy.get('@BUTTON').click();
+      // should no be visible on second click
+      cy.root().find('.popover-custom').should('not.exist');
     });
-    cy.get('ngx-tooltip-content').should('exist');
   });
 });

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## HEAD (unreleased)
 
+- Feature (`ngx-tooltip`): Added new ShowTypes 'click' which can open/close the popover when clicking the component
+
+## 48.0.5 (2024-09-27)
+
 - Enhancement (`ngx-calendar`): Should initialize with Date when `range` Input is used
 - Enhancement (`ngx-calendar`): Validation for time in date range selection
 - Fix (`ngx-calendar`): Possible bug when emitting date range selection and selecting AM/PM

projects/swimlane/ngx-ui/src/lib/components/tooltip/show-types.enum.ts

@@ -1,5 +1,6 @@
 export enum ShowTypes {
   all = 'all',
   focus = 'focus',
+  click = 'click',
   mouseover = 'mouseover'
 }

projects/swimlane/ngx-ui/src/lib/components/tooltip/tooltip.directive.spec.ts

@@ -114,6 +114,23 @@ describe('TooltipDirective', () => {
       directive.onMouseClick();
       expect(spy).not.toHaveBeenCalled();
     });
+
+    it('should show tooltip - ShowTypes.click', () => {
+      const spy = spyOn(directive, 'showTooltip');
+      directive.tooltipShowEvent = ShowTypes.click;
+      directive.onMouseClick();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should hide tooltip - ShowTypes.click', () => {
+      const spy = spyOn(directive, 'hideTooltip');
+      directive.tooltipShowEvent = ShowTypes.click;
+      // open tooltip
+      directive.onMouseClick();
+      // close tooltip
+      directive.onMouseClick();
+      expect(spy).toHaveBeenCalled();
+    });
   });
 
   describe('showTooltip', () => {

projects/swimlane/ngx-ui/src/lib/components/tooltip/tooltip.directive.ts

@@ -103,6 +103,7 @@ export class TooltipDirective implements OnDestroy {
   private _tooltipCloseOnMouseLeave = true;
   private _tooltipHideTimeout = 300;
   private _tooltipShowTimeout = 100;
+  private _tooltipIsOpenFromClick = false;
 
   private get listensForFocus(): boolean {
     return this.tooltipShowEvent === ShowTypes.all || this.tooltipShowEvent === ShowTypes.focus;
@@ -112,12 +113,20 @@ export class TooltipDirective implements OnDestroy {
     return this.tooltipShowEvent === ShowTypes.all || this.tooltipShowEvent === ShowTypes.mouseover;
   }
 
+  private get listensForClick(): boolean {
+    return this.tooltipShowEvent === ShowTypes.all || this.tooltipShowEvent === ShowTypes.click;
+  }
+
   private component: ComponentRef<TooltipContentComponent>;
   private timeout: any;
   private mouseLeaveContentEvent: () => void;
   private mouseEnterContentEvent: () => void;
   private documentClickEvent: () => void;
 
+  get tooltipIsOpenFromClick(): boolean {
+    return this._tooltipIsOpenFromClick;
+  }
+
   constructor(
     private readonly ngZone: NgZone,
     private readonly tooltipService: TooltipService,
@@ -153,7 +162,7 @@ export class TooltipDirective implements OnDestroy {
 
   @HostListener('mouseleave', ['$event'])
   onMouseLeave(event: { toElement: Node }): void {
-    if (this.listensForHover && this.tooltipCloseOnMouseLeave) {
+    if ((this.listensForHover && this.tooltipCloseOnMouseLeave) || this.listensForClick) {
       clearTimeout(this.timeout);
 
       /* istanbul ignore if */
@@ -171,6 +180,13 @@ export class TooltipDirective implements OnDestroy {
   onMouseClick(): void {
     if (this.tooltipShowEvent === ShowTypes.mouseover) {
       this.hideTooltip(true);
+    } else if (this.listensForClick) {
+      if (this._tooltipIsOpenFromClick) {
+        this.hideTooltip(true);
+      } else {
+        this._tooltipIsOpenFromClick = true;
+        this.showTooltip(true);
+      }
     }
   }
 
@@ -224,6 +240,8 @@ export class TooltipDirective implements OnDestroy {
     } else {
       destroyFn();
     }
+
+    this._tooltipIsOpenFromClick = false;
   }
 
   addHideListeners(tooltip: HTMLElement): void {

src/app/dialogs/tooltip-page/tooltip-page.component.html

@@ -150,6 +150,52 @@ <h3>Tool tip custom content defined inside a template</h3>
     </a>]]>
       </app-prism>
     </ngx-section>
+
+    <ngx-section class="shadow" sectionTitle="Popover shown on click">
+
+      <ngx-button
+        #customTooltip=ngxTooltip 
+        ngx-tooltip
+        class="btn btn-primary"
+        [tooltipContext]="{ foo: 'YAZ' }"
+        [tooltipType]="'popover'"
+        [tooltipPlacement]="'bottom'"
+        [tooltipShowCaret]="false"
+        [tooltipCssClass]="'popover-custom'"
+        [tooltipSpacing]="5"
+        [tooltipTemplate]="popoverMenuTemplate"
+        [tooltipShowEvent]="'click'"
+        data-cy="popover-click"
+        >Click me to open</ngx-button>
+      <ng-template #popoverMenuTemplate let-model="model">
+          <ul class="vertical-list">
+            <li><button type="button" (click)="closeTooltip()">Click me to close</button></li>
+            <li class="disabled"><button type="button">You can't click me</button></li>
+        </ul>
+      </ng-template>
+
+      <app-prism>
+        <![CDATA[<ngx-button
+          #customTooltip=ngxTooltip 
+          ngx-tooltip
+          class="btn btn-primary"
+          [tooltipContext]="{ foo: 'YAZ' }"
+          [tooltipType]="'popover'"
+          [tooltipPlacement]="'bottom'"
+          [tooltipShowCaret]="false"
+          [tooltipCssClass]="'popover-custom'"
+          [tooltipSpacing]="5"
+          [tooltipTemplate]="popoverMenuTemplate"
+          [tooltipShowEvent]="'click'"
+        >Click me to open</ngx-button>
+      <ng-template #popoverMenuTemplate let-model="model">
+          <ul class="vertical-list">
+            <li><button type="button" (click)="closeTooltip()">Click me to close</button></li>
+            <li class="disabled"><button type="button">You can't click me</button></li>
+        </ul>
+      </ng-template>]]>
+          </app-prism>
+    </ngx-section>
 
     <ngx-section class="shadow" sectionTitle="Appearances">
       <table class="appearance-table" style="max-width: 100%">

src/app/dialogs/tooltip-page/tooltip-page.component.scss

@@ -1,3 +1,7 @@
+@import 'vendor/index';
+@import 'colors/variables';
+@import 'components/index';
+
 .appearance-table {
   max-width: 100%;
 

src/app/dialogs/tooltip-page/tooltip-page.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { TooltipDirective } from '@swimlane/ngx-ui';
 
 @Component({
   selector: 'app-tooltip-page',
@@ -7,6 +8,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./tooltip-page.component.scss']
 })
 export class TooltipPageComponent {
+  @ViewChild('customTooltip', { static: true }) customTooltip: TooltipDirective;
+
   tooltipModel = {
     text: 'foo'
   };
@@ -20,4 +23,8 @@ export class TooltipPageComponent {
   scrollTo(id: string) {
     (document.getElementById(id) as HTMLElement)?.scrollIntoView({ behavior: 'smooth' });
   }
+
+  closeTooltip(): void {
+    this.customTooltip.hideTooltip(true);
+  }
 }

src/app/dialogs/tooltip-page/tooltip-page.module.ts

@@ -1,14 +1,22 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { SectionModule, TabsModule, TooltipModule } from '@swimlane/ngx-ui';
+import { DropdownModule, SectionModule, TabsModule, TooltipModule } from '@swimlane/ngx-ui';
 import { PrismModule } from '../../common/prism/prism.module';
 
 import { TooltipPageRoutingModule } from './tooltip-page-routing.module';
 import { TooltipPageComponent } from './tooltip-page.component';
 
 @NgModule({
   declarations: [TooltipPageComponent],
-  imports: [CommonModule, PrismModule, SectionModule, TooltipModule, TooltipPageRoutingModule, TabsModule]
+  imports: [
+    CommonModule,
+    PrismModule,
+    SectionModule,
+    TooltipModule,
+    TooltipPageRoutingModule,
+    TabsModule,
+    DropdownModule
+  ]
 })
 export class TooltipPageModule {}