refactor: 💡 pr fixes

README.md

@@ -134,7 +134,19 @@ You can pass the `onlyTextOverflow` input to show the tooltip only when the host
 </div>
 ```
 
-Note that it's using [`ResizeObserver`](https://caniuse.com/resizeobserver) api.
+Note: this feature is using [`ResizeObserver`](https://caniuse.com/resizeobserver) api.
+
+You might have cases where the host has a static width and the content is dynamic. In this case, use the `tpStaticWidthHost` input with combination with `tpOnlyTextOverflow`:
+
+```html
+<div style="max-width: 100px;" class="overflow-hidden flex">
+  <p style="width: 100px" class="ellipsis" [tp]="dynamicText" tpPlacement="right" [tpOnlyTextOverflow]="true" tpStaticWidthHost>
+    {{ dynamicText }}
+  </p>
+</div>
+```
+
+Note: when using `tpStaticWidthHost` you can't use `tpUseTextContent`, you need to explicitly pass the content to `tp` in order to trigger content change.
 
 ### Use Text Content
 

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

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  booleanAttribute,
   Directive,
   ElementRef,
   EventEmitter,
@@ -16,13 +17,12 @@ import {
 } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
 import tippy, { Instance } from 'tippy.js';
-import { fromEvent, merge, Subject } from 'rxjs';
+import { fromEvent, merge, Observable, Subject } from 'rxjs';
 import { filter, map, switchMap, takeUntil } from 'rxjs/operators';
 import { Content, isComponent, isString, isTemplateRef, ViewOptions, ViewRef, ViewService } from '@ngneat/overview';
 
 import {
   coerceCssPixelValue,
-  contentChange$,
   dimensionsChanges,
   inView,
   isElementOverflow,
@@ -40,7 +40,6 @@ import { NgChanges, TIPPY_CONFIG, TIPPY_REF, TippyConfig, TippyInstance, TippyPr
   standalone: true,
 })
 export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnInit {
-  static ngAcceptInputType_useTextContent: boolean | '';
   content: Content | undefined | null;
 
   @Input('tp') set tp(content: Content | undefined | null) {
@@ -66,12 +65,13 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
   @Input('tpTriggerTarget') triggerTarget: TippyProps['triggerTarget'];
   @Input('tpZIndex') zIndex: TippyProps['zIndex'];
   @Input('tpAnimation') animation: TippyProps['animation'];
-  @Input('tpUseTextContent') useTextContent: boolean;
+  @Input({ transform: booleanAttribute, alias: 'tpUseTextContent' }) useTextContent: boolean;
   @Input('tpIsLazy') isLazy: boolean;
   @Input('tpVariation') variation: string;
   @Input('tpIsEnabled') isEnabled: boolean;
   @Input('tpClassName') className: string | string[];
   @Input('tpOnlyTextOverflow') onlyTextOverflow = false;
+  @Input({ transform: booleanAttribute, alias: 'tpStaticWidthHost' }) staticWidthHost = false;
   @Input('tpData') data: any;
   @Input('tpUseHostWidth') useHostWidth = false;
   @Input('tpHideOnEscape') hideOnEscape = false;
@@ -275,7 +275,7 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
   }
 
   protected createInstance() {
-    if (!this.content && !coerceBooleanInput(this.useTextContent)) {
+    if (!this.content && !this.useTextContent) {
       return;
     }
 
@@ -383,7 +383,7 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
 
     let content = this.viewRef.getElement();
 
-    if (coerceBooleanInput(this.useTextContent)) {
+    if (this.useTextContent) {
       content = instance.reference.textContent;
     }
 
@@ -469,22 +469,30 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
   }
 
   private isOverflowing$() {
-    return merge(
-      overflowChanges(this.host),
-      // We need to handle cases where the host has a static width but the content might change
-      this.contentChanged.asObservable().pipe(
-        // We need to wait for the content to be rendered before we can check if it's overflowing.
-        switchMap(() => contentChange$(this.host)),
-        map(() => isElementOverflow(this.host))
-      )
-    );
+    const notifiers$ = [overflowChanges(this.host)];
+
+    // We need to handle cases where the host has a static width but the content might change
+    if (this.staticWidthHost) {
+      notifiers$.push(
+        this.contentChanged.asObservable().pipe(
+          // We need to wait for the content to be rendered before we can check if it's overflowing.
+          switchMap(() => {
+            return new Observable((subscriber) => {
+              window.requestAnimationFrame(() => {
+                subscriber.next();
+                subscriber.complete();
+              });
+            });
+          }),
+          map(() => isElementOverflow(this.host))
+        )
+      );
+    }
+
+    return merge(...notifiers$);
   }
 }
 
 function isChanged<T extends object>(key: keyof T, changes: T) {
   return key in changes;
 }
-
-export function coerceBooleanInput(value: any): boolean {
-  return value != null && `${value}` !== 'false';
-}

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

@@ -44,18 +44,6 @@ export function inView(
   });
 }
 
-export function contentChange$(host: HTMLElement) {
-  return new Observable((subscriber) => {
-    const observer = new MutationObserver(() => {
-      subscriber.next(true);
-      subscriber.complete();
-    });
-    observer.observe(host, { characterData: true, subtree: true });
-
-    return () => observer.disconnect();
-  });
-}
-
 export function isElementOverflow(host: HTMLElement): boolean {
   // Don't access the `offsetWidth` multiple times since it triggers layout updates.
   const hostOffsetWidth = host.offsetWidth;

src/app/playground/playground.component.html

@@ -203,6 +203,7 @@ <h6>Text Overflow</h6>
         class="ellipsis"
         [tp]="text3"
         tpPlacement="right"
+        tpStaticWidthHost
         [tpOnlyTextOverflow]="true"
         data-cy="overflow-case-3"
       >