Skip to content

Commit 18a0bc6

Browse files
committed
fix(tooltip): css .show class not binding to the component element, refactor
1 parent 513c693 commit 18a0bc6

File tree

2 files changed

+34
-28
lines changed

2 files changed

+34
-28
lines changed

projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
ChangeDetectorRef,
23
ComponentRef,
34
Directive,
45
ElementRef,
@@ -95,6 +96,7 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
9596
private renderer: Renderer2,
9697
private hostElement: ElementRef,
9798
private viewContainerRef: ViewContainerRef,
99+
private changeDetectorRef: ChangeDetectorRef,
98100
private listenersService: ListenersService
99101
) {}
100102

@@ -167,46 +169,48 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
167169
if (!this.tooltipRef) {
168170
this.createTooltipElement();
169171
}
172+
173+
this.tooltipId = this.getUID('tooltip');
174+
this.tooltipRef.instance.id = this.tooltipId;
170175
this.tooltipRef.instance.content = this.content;
176+
171177
this.tooltip = this.tooltipRef.location.nativeElement;
172178
this.renderer.addClass(this.tooltip, 'd-none');
173179
this.renderer.addClass(this.tooltip, 'fade');
174180

175181
this.popperInstance?.destroy();
176182

183+
this.viewContainerRef.insert(this.tooltipRef.hostView);
184+
this.renderer.appendChild(this.document.body, this.tooltip);
185+
186+
this.popperInstance = createPopper(
187+
this.hostElement.nativeElement,
188+
this.tooltip,
189+
{ ...this.popperOptions }
190+
);
191+
if (!this.visible) {
192+
this.removeTooltipElement();
193+
return;
194+
}
195+
this.renderer.removeClass(this.tooltip, 'd-none');
196+
this.changeDetectorRef.markForCheck();
197+
177198
setTimeout(() => {
178-
this.popperInstance = createPopper(
179-
this.hostElement.nativeElement,
180-
this.tooltip,
181-
{ ...this.popperOptions }
182-
);
183-
this.viewContainerRef.insert(this.tooltipRef.hostView);
184-
this.renderer.appendChild(this.document.body, this.tooltip);
185-
if (!this.visible) {
186-
this.removeTooltipElement();
187-
return;
188-
}
189-
setTimeout(() => {
190-
this.tooltipId = this.getUID('tooltip');
191-
this.tooltipRef.instance.id = this.tooltipId;
192-
if (!this.visible) {
193-
this.removeTooltipElement();
194-
return;
195-
}
196-
this.renderer.removeClass(this.tooltip, 'd-none');
197-
this.tooltipRef.instance.visible = this.visible;
198-
this.popperInstance.forceUpdate();
199-
}, 100);
200-
});
199+
this.tooltipRef.instance.visible = this.visible;
200+
this.popperInstance.forceUpdate();
201+
this.changeDetectorRef.markForCheck();
202+
}, 100);
203+
201204
}
202205

203206
private removeTooltipElement(): void {
204207
this.tooltipId = '';
205208
if (!this.tooltipRef) {
206209
return;
207210
}
208-
this.tooltipRef.instance.visible = this.visible;
211+
this.tooltipRef.instance.visible = false;
209212
this.tooltipRef.instance.id = undefined;
213+
this.changeDetectorRef.markForCheck();
210214
setTimeout(() => {
211215
this.viewContainerRef?.detach();
212216
}, 300);
Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<div class="tooltip-arrow" data-popper-arrow></div>
2-
<div class="tooltip-inner">
3-
<ng-container #tooltipTemplate></ng-container>
4-
</div>
1+
<ng-container>
2+
<div class="tooltip-arrow" data-popper-arrow></div>
3+
<div class="tooltip-inner">
4+
<ng-container #tooltipTemplate></ng-container>
5+
</div>
6+
</ng-container>

0 commit comments

Comments
 (0)