When doing window.open and adding content from initial page to new window, tooltips are shown in original window

[dnldev]

    const windowPath = window.location.origin + window.location.pathname + '_window';
    this.windowRef = window.open(
      windowPath,
      '_blank',
      `width=${this.width},height=${this.height},screenX=${this.left},screenY=${this.top}`, 
      true
    );
    if (this.windowRef) {
      this.windowRef.addEventListener('beforeunload', this.closePortal);
      this.windowRef.addEventListener('load', () => {
        this.windowLoaded = true;
        // Clear any existing content
        this.windowRef!!.document.body.innerHTML = '';
        this.windowRef!!.document.title = document.title;
        // Move the component into the window
        const app = document.createElement('div');
        app.id = 'window-portal';
        app.appendChild(this.$el);

        this.windowRef!!.document.body.appendChild(app);
  }

The tooltips are still in the initial dom and are shown in the top right corner. How can they be copied to the new page. I think this happens because the tooltip content is rendered outside of the component I copy into my new window (as I can see them in the initial dom)

[KABBOUCHI]

try to set appendTo to parent or () => this.$el

[dnldev]

try to set appendTo to parent or () => this.$el

what do you mean exactly? how would I adapt my code?

[KABBOUCHI]

can u share ur tippy code?

[dnldev]

<custom-btn :class="targetClass"
          :style="targetStyle"
          :id="targetId"
          :content="tooltipText"
          v-tippy="{duration: 200, placement: 'bottom', animation: 'fade'}"
          v-bind="$attrs"
           v-on="$listeners">
  <slot name="default"></slot>
</custom-btn>

[KABBOUCHI]

<custom-btn :class="targetClass"
    :style="targetStyle"
    :id="targetId"
    :content="tooltipText"
-   v-tippy="{duration: 200, placement: 'bottom', animation: 'fade'}"
+   v-tippy="{duration: 200, placement: 'bottom', animation: 'fade', appendTo: 'parent'}"
    v-bind="$attrs"
    v-on="$listeners">
    <slot name="default"></slot>
</custom-btn>

[dnldev]

Thank you for your response, the tooltips now show in the new window. A new bug has come up though: in the new window, the tooltips don't get hidden when stopping to hover. The same component in the original window hides the tooltips as expected.

This is what the non-removed tooltips look like:

[dnldev]

this was a different issue. my problem is solved, thank you!