|
1 | 1 | import {
|
| 2 | + ChangeDetectorRef, |
2 | 3 | ComponentRef,
|
3 | 4 | Directive,
|
4 | 5 | ElementRef,
|
@@ -95,6 +96,7 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
|
95 | 96 | private renderer: Renderer2,
|
96 | 97 | private hostElement: ElementRef,
|
97 | 98 | private viewContainerRef: ViewContainerRef,
|
| 99 | + private changeDetectorRef: ChangeDetectorRef, |
98 | 100 | private listenersService: ListenersService
|
99 | 101 | ) {}
|
100 | 102 |
|
@@ -167,46 +169,48 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
|
167 | 169 | if (!this.tooltipRef) {
|
168 | 170 | this.createTooltipElement();
|
169 | 171 | }
|
| 172 | + |
| 173 | + this.tooltipId = this.getUID('tooltip'); |
| 174 | + this.tooltipRef.instance.id = this.tooltipId; |
170 | 175 | this.tooltipRef.instance.content = this.content;
|
| 176 | + |
171 | 177 | this.tooltip = this.tooltipRef.location.nativeElement;
|
172 | 178 | this.renderer.addClass(this.tooltip, 'd-none');
|
173 | 179 | this.renderer.addClass(this.tooltip, 'fade');
|
174 | 180 |
|
175 | 181 | this.popperInstance?.destroy();
|
176 | 182 |
|
| 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 | + |
177 | 198 | 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 | + |
201 | 204 | }
|
202 | 205 |
|
203 | 206 | private removeTooltipElement(): void {
|
204 | 207 | this.tooltipId = '';
|
205 | 208 | if (!this.tooltipRef) {
|
206 | 209 | return;
|
207 | 210 | }
|
208 |
| - this.tooltipRef.instance.visible = this.visible; |
| 211 | + this.tooltipRef.instance.visible = false; |
209 | 212 | this.tooltipRef.instance.id = undefined;
|
| 213 | + this.changeDetectorRef.markForCheck(); |
210 | 214 | setTimeout(() => {
|
211 | 215 | this.viewContainerRef?.detach();
|
212 | 216 | }, 300);
|
|
0 commit comments