Merge pull request #64 from jon-coffey/master

README.md

@@ -210,6 +210,19 @@ Now you can use it in your template:
 <button (click)="tooltip.hide()">Close</button>
 ```
 
+### Show/hide declarativly
+
+Use isVisible to trigger show and hide. Set trigger to manual.
+
+```html
+<div tippy="Helpful Message" trigger="manual" [isVisible]="visibility">
+  Click Open to see me
+</div>
+
+<button (click)="visibility = true">Open</button>
+<button (click)="visibility = false">Close</button>
+```
+
 You can see more examples in
 our [playground](https://github.com/ngneat/helipopper/blob/master/src/app/app.component.html), or
 live [here](https://ngneat.github.io/helipopper/).
@@ -236,6 +249,7 @@ tippyHost: HTMLElement;
 lazy: boolean;
 variation: string;
 isEnabled: boolean;
+isVisible: boolean;
 className: string;
 onlyTextOverflow: boolean;
 useHostWidth: boolean;

cypress/integration/helipopper-is-visible.spec.ts

@@ -0,0 +1,41 @@
+Cypress.on('scrolled', element => {
+  // When we do `cy.get()` the Cypress finds the element
+  // and scrolls down, thus this element becomes at the very top
+  // of the page.
+  // `tippy.js` will not show tooltips if they appeared in an invisible
+  // part of the window.
+  element.get(0).scrollIntoView({
+    block: 'center',
+    inline: 'center'
+  });
+});
+
+describe('@ngneat/helipopper/is_visible', () => {
+  const popperSelector = '.tippy-box .tippy-content';
+
+  describe('isVisible attribute', () => {
+    beforeEach(() => {
+      cy.visit('/').wait(200);
+    });
+
+    it('should not be visible while flag is false', () => {
+      cy.get('.declarativeTooltip').should('not.exist');
+    });
+    it('should be visible while flag is true', () => {
+      cy.get('[data-cy~="trigger-declarative"]').click({ force: true });
+      cy.get(popperSelector).contains("I'm a declarative tooltip");
+      cy.get('[data-cy~="trigger-declarative"]').click({ force: true });
+      cy.get('.declarativeTooltip').should('not.exist');
+    });
+  });
+
+  describe('isVisible attribute with initial value true', () => {
+    beforeEach(() => {
+      cy.visit('/is-visible').wait(200);
+    });
+
+    it('should be visible while flag is already set true before view renders', () => {
+      cy.get(popperSelector).contains("I'm a declarative tooltip");
+    });
+  });
+});

package.json

@@ -23,7 +23,7 @@
     "build:playground": "ng build --project helipopper-playground --configuration production",
     "test:playground": "ng test --project helipopper-playground",
     "serve:playground": "ng s --project helipopper-playground --live-reload false",
-    "serve:playground:static": "serve dist/helipopper-playground -l 4200",
+    "serve:playground:static": "angular-http-server --path dist/helipopper-playground -p 4200",
     "// - E2E": "E2E testing",
     "cy:open": "cypress open --config integrationFolder=cypress/integration",
     "cy:run": "cypress run --config integrationFolder=cypress/integration",
@@ -65,6 +65,7 @@
     "@types/node": "^15.3.0",
     "all-contributors-cli": "^6.8.1",
     "angular-cli-ghpages": "^0.6.2",
+    "angular-http-server": "^1.10.0",
     "codelyzer": "^6.0.0",
     "cross-env": "^5.2.0",
     "cypress": "^7.4.0",

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

@@ -56,7 +56,7 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
   @Input('tippyHost') customHost: HTMLElement;
 
   @Output() visible = new EventEmitter<boolean>();
-  public isVisible = false;
+  @Input() public isVisible = false;
 
   private instance: TippyInstance;
   private viewRef: ViewRef;
@@ -79,6 +79,8 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
     if (isPlatformServer(this.platformId)) return;
 
     let props: Partial<TippyConfig> = Object.keys(changes).reduce((acc, change) => {
+      if (change === 'isVisible') return acc;
+
       acc[change] = changes[change].currentValue;
 
       return acc;
@@ -106,6 +108,10 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
       this.setStatus();
     }
 
+    if (isChanged<NgChanges<TippyDirective>>('isVisible', changes)) {
+      this.isVisible ? this.show() : this.hide();
+    }
+
     this.setProps(props);
   }
 
@@ -214,6 +220,9 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
             }
           }
           this.globalConfig.onCreate?.(instance);
+          if (this.isVisible === true) {
+            instance.show();
+          }
         },
         onShow: instance => {
           this.zone.run(() => {

src/app/app-routing.module.ts

@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { IsVisibleComponent } from './is-visible/isVisible.component';
+import { PlaygroundComponent } from './playground/playground.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'is-visible', component: IsVisibleComponent },
+  { path: '**', component: PlaygroundComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],