feat: added config 'disableOnNilValue' to disable tippy if value is nil

README.md

@@ -250,6 +250,7 @@ visible = new EventEmitter<boolean>();
 ### Global Config
 - You can pass any `tippy` option at global config level. 
 - `beforeRender` - Hook that'll be called before rendering the tooltip content ( applies only for string )
+- `disableOnNilValue` - Boolean flag that disables the tooltip if the assigned value is null or undefined. This can be seen as a shortcut to `isEnable`
 
 ### Create `tippy` Programmatically
 

cypress/integration/helipopper.spec.ts

@@ -29,7 +29,7 @@ describe("@ngneat/helipopper", () => {
   describe("Custom template", () => {
     it("should create tooltip with a custom template", () => {
       cy.get("#custom-template button")
-        .click()
+        .click({ force: true })
         .get(".positions")
         .contains("top")
         .should("exist");
@@ -45,4 +45,28 @@ describe("@ngneat/helipopper", () => {
         .should("exist");
     });
   });
+
+  describe("Tippy nil values", () => {
+    it("should create a tooltip with a non-nil value", () => {
+      cy.get("#tippy-value-non-nil button")
+        .click({ force: true })
+        .get(".tippy-box .tippy-content")
+        .contains("I have a tooltip value different from nil")
+        .should("exist");
+    });
+
+    it("should not create a tooltip when using a null value", () => {
+      cy.get("#tippy-value-null button")
+        .click({ force: true })
+        .get(".tippy-box .tippy-content")
+        .should("not.exist");
+    });
+
+    it("should not create a tooltip when using an undefined value", () => {
+      cy.get("#tippy-value-undefined button")
+        .click({ force: true })
+        .get(".tippy-box .tippy-content")
+        .should("not.exist");
+    });
+  });
 });

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

@@ -202,7 +202,16 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
         this.globalConfig.onCreate?.(instance);
       },
       onShow: instance => {
-        this.zone.run(() => this.instance.setContent(this.resolveContent()));
+        let resolvedContent = null;
+        this.zone.run(() => {
+          resolvedContent = this.resolveContent();
+          this.instance.setContent(resolvedContent);
+        });
+
+        if (this.globalConfig.disableOnNilValue && resolvedContent === null) {
+          return false;
+        }
+
         if (this.useHostWidth) {
           instance.popper.style.width = this.hostWidth;
           instance.popper.style.maxWidth = this.hostWidth;
@@ -225,6 +234,10 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
   }
 
   private resolveContent() {
+    if (this.globalConfig.disableOnNilValue && (this.content === null || this.content === undefined)) {
+      return null;
+    }
+
     if (!this.viewOptions$ && !isString(this.content)) {
       if (isComponent(this.content)) {
         this.viewOptions$ = {

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

@@ -36,6 +36,7 @@ export interface TippyConfig extends TippyProps {
   variations: Record<string, Partial<TippyProps>>;
   defaultVariation: keyof TippyConfig["variations"];
   beforeRender?: (text: string) => string;
+  disableOnNilValue?: boolean;
 }
 
 export function coerceElement(element: TippyElement) {

src/app/app.component.html

@@ -43,6 +43,34 @@ <h6>Default variation</h6>
 
   <hr />
 
+  <div>
+    <h6>NIL values</h6>
+
+    <div class="btn-container" id="tippy-value-non-nil">
+      <button
+        [tippy]="'I have a tooltip value different from nil'"
+        variation="popper"
+        class="btn btn-outline-secondary"
+      >
+        Click me to see my tooltip
+      </button>
+    </div>
+
+    <div class="btn-container" id="tippy-value-null">
+      <button [tippy]="null" variation="popper" class="btn btn-outline-secondary">
+        Click me but I won't show a tooltip
+      </button>
+    </div>
+
+    <div class="btn-container" id="tippy-value-undefined">
+      <button [tippy]="undefined" variation="popper" class="btn btn-outline-secondary">
+        Click me but I won't show a tooltip
+      </button>
+    </div>
+  </div>
+
+  <hr />
+
   <div>
     <h6>Custom Template</h6>
 

src/app/app.module.ts

@@ -29,7 +29,8 @@ import { popperVariation, TippyModule, tooltipVariation, withContextMenuVariatio
           ...popperVariation,
           theme: "light-border"
         }
-      }
+      },
+      disableOnNilValue: true
     })
   ],
   providers: [],