feat: 🎸 support fullscreenElement when active

to make it work in fullscreen mode we need to append to this element
instead of the body

Author: NetanelBasal

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

@@ -385,7 +385,7 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnInit {
     this.tippyFactory
       .create(this.host(), {
         allowHTML: true,
-        appendTo: document.body,
+        appendTo: document.fullscreenElement || document.body,
         ...(this.globalConfig.zIndexGetter
           ? { zIndex: this.globalConfig.zIndexGetter() }
           : {}),

src/app/playground/playground.component.html

@@ -516,3 +516,31 @@ <h6>Use text content</h6>
 </div>
 
 <hr />
+
+<div>
+  <h6>Fullscreen Tooltip Test</h6>
+  <p>This demonstrates tooltips working correctly in fullscreen mode:</p>
+
+  <div class="btn-container">
+    <button
+      (click)="toggleFullscreen()"
+      class="btn btn-outline-primary"
+      tp="fullscreenTooltip"
+      tpPlacement="bottom"
+    >
+      Toggle full screen
+    </button>
+  </div>
+
+  <div class="mt-3">
+    <button
+      class="btn btn-outline-secondary"
+      tp="This tooltip should work in both normal and fullscreen modes!"
+      tpPlacement="top"
+    >
+      Hover me (works in fullscreen)
+    </button>
+  </div>
+</div>
+
+<hr />

src/app/playground/playground.component.ts

@@ -139,4 +139,12 @@ export class PlaygroundComponent {
   }
 
   visibility = false;
+
+  toggleFullscreen() {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  }
 }