Tooltip Visual Issue still persists

[ajobra76]

Describe the bug

#15545 if tooltip is inside a table within a Dialog the problem still occures. In 17.16.1 it occured also without a dialog. In 17.15.0 the Problem did not exist.

Environment

windows,chrome

Reproducer

No response

Angular version

17

PrimeNG version

17.18.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.13.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[mehmetcetin01140]

Hi,

Could you please share a stackblitz example so we can identify the issue clearly?

[ajobra76]

Modified prime ng dialog example with tooltip

<div class="card flex justify-content-center">
    <p-button (click)="showDialog()" label="Show" />
    <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
        <span class="p-text-secondary block mb-5">Update your information.</span>
        <div class="flex align-items-center gap-3 mb-3">
            <label for="username" class="font-semibold w-6rem">Username</label>
            <input pInputText pTooltip="Hello" id="username" class="flex-auto" autocomplete="off" />
        </div>
        <div class="flex align-items-center gap-3 mb-5">
            <label for="email" class="font-semibold w-6rem">Email</label>
            <input pInputText id="email" class="flex-auto" autocomplete="off" />
        </div>
        <div class="flex justify-content-end gap-2">
            <p-button label="Cancel" severity="secondary" (click)="visible = false" />
            <p-button label="Save" (click)="visible = false" />
        </div>
    </p-dialog>
</div>

The tooltip text will not only show within the tooltip, but initially also in the dialogs parent component .

[ajobra76]

https://stackblitz.com/edit/rfsxwz?file=src%2Fapp%2Fdialog-basic-demo.html

move mouse over input email you will see tooltip hello but you also see the text hello flickering on main page a second time

[Marco-Mauri]

I found the source of the bug.

After the version 17.15.0 in the show method of the Tooltip class the following if was added.

if (pDialogWrapper) { setTimeout(() => { this.container && this.align(); }, 100); } else { this.align(); }

the setTimeout causes a redraw to happen before the tooltip is fully setup causing the problem.

Simply removing the setTimeout fixes the problem, but I don't know why it was added, so maybe removing it causes other problems

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[eluchsinger]

Any ideas about the proposed solution here? Currently we can't use the Tooltip because it flickers our whole app.