Skip to content

Hide the tooltip on destroying its target. #15786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 12, 2025
Merged

Hide the tooltip on destroying its target. #15786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
674bcf0
test(Tooltip): Adding a test for destroying the target.
gedinakova May 9, 2025
8f7dc84
fix(Tooltip): Hide the tooltip on destroying the target.
gedinakova May 9, 2025
2076430
chore(*): Fixed indentation in test component.
gedinakova May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
* @hidden
*/
public ngOnDestroy() {
this.hideTooltip();
this.destroy$.next();
this.destroy$.complete();
}
Expand Down
15 changes: 14 additions & 1 deletion projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,19 @@ describe('IgxTooltip', () => {
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
}));

it('IgxTooltip is hidden when its target is destroyed', fakeAsync(() => {
hoverElement(button);
flush();

verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);

fix.componentInstance.showButton = false;
fix.detectChanges();
flush();

verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
}));

describe('Tooltip events', () => {
// configureTestSuite();
it('should emit the proper events when hovering/unhovering target', fakeAsync(() => {
Expand Down Expand Up @@ -596,7 +609,7 @@ const touchElement = (element) => element.nativeElement.dispatchEvent(new TouchE
const verifyTooltipVisibility = (tooltipNativeElement, tooltipTarget, shouldBeVisible: boolean) => {
expect(tooltipNativeElement.classList.contains(TOOLTIP_CLASS)).toBe(shouldBeVisible);
expect(tooltipNativeElement.classList.contains(HIDDEN_TOOLTIP_CLASS)).not.toBe(shouldBeVisible);
expect(tooltipTarget.tooltipHidden).not.toBe(shouldBeVisible);
expect(tooltipTarget?.tooltipHidden).not.toBe(shouldBeVisible);
};

const verifyTooltipPosition = (tooltipNativeElement, actualTarget, shouldBeAligned: boolean) => {
Expand Down
16 changes: 10 additions & 6 deletions projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/togg
@Component({
template: `
<div class="dummyDiv">dummy div for touch tests</div>
<button [igxTooltipTarget]="tooltipRef" [tooltip]="'Infragistics Inc. HQ'"
(tooltipShow)="showing($event)" (tooltipHide)="hiding($event)"
style="margin: 200px">
Hover me
</button>

@if (showButton) {
<button [igxTooltipTarget]="tooltipRef" [tooltip]="'Infragistics Inc. HQ'"
(tooltipShow)="showing($event)" (tooltipHide)="hiding($event)"
style="margin: 200px">
Hover me
</button>
}
<div igxTooltip #tooltipRef="tooltip">
Hello, I am a tooltip!
</div>
Expand All @@ -20,9 +23,10 @@ import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/togg
})
export class IgxTooltipSingleTargetComponent {
@ViewChild(IgxTooltipDirective, { static: true }) public tooltip: IgxTooltipDirective;
@ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective;
@ViewChild(IgxTooltipTargetDirective, { static: false }) public tooltipTarget: IgxTooltipTargetDirective;
public cancelShowing = false;
public cancelHiding = false;
public showButton = true;

public showing(args: ITooltipShowEventArgs) {
if (this.cancelShowing) {
Expand Down
Loading