tooltip

1import { Overlay, OverlayPositionBuilder, type OverlayRef } from '@angular/cdk/overlay';
2import { ComponentPortal } from '@angular/cdk/portal';
3import { isPlatformBrowser, DOCUMENT } from '@angular/common';
4import {
5  ChangeDetectionStrategy,
6  Component,
7  type ComponentRef,
8  computed,
9  DestroyRef,
10  Directive,
11  effect,
12  ElementRef,
13  inject,
14  Injector,
15  input,
16  numberAttribute,
17  type OnDestroy,
18  type OnInit,
19  output,
20  PLATFORM_ID,
21  Renderer2,
22  runInInjectionContext,
23  signal,
24  type TemplateRef,
25  viewChild,
26} from '@angular/core';
27import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
28 
29import { filter, map, of, Subject, switchMap, tap, timer } from 'rxjs';
30 
31import { TOOLTIP_POSITIONS_MAP } from '@/shared/components/tooltip/tooltip-positions';
32import {
33  tooltipPositionVariants,
34  tooltipVariants,
35  type ZardTooltipPositionVariants,
36} from '@/shared/components/tooltip/tooltip.variants';
37import { ZardIdDirective } from '@/shared/core';
38import { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';
39import { mergeClasses } from '@/shared/utils/merge-classes';
40 
41export type ZardTooltipTriggers = 'click' | 'hover';
42export type ZardTooltipType = string | TemplateRef<void> | null;
43 
44interface DelayConfig {
45  isShow: boolean;
46  delay: number;
47}
48 
49const throttle = (callback: () => void, wait: number) => {
50  let time = Date.now();
51  return function () {
52    if (time + wait - Date.now() < 0) {
53      callback();
54      time = Date.now();
55    }
56  };
57};
58 
59@Directive({
60  selector: '[zTooltip]',
61  host: {
62    style: 'cursor: pointer',
63  },
64  exportAs: 'zTooltip',
65})
66export class ZardTooltipDirective implements OnInit, OnDestroy {
67  private readonly destroyRef = inject(DestroyRef);
68  private readonly document = inject(DOCUMENT);
69  private readonly elementRef = inject(ElementRef<HTMLElement>);
70  private readonly injector = inject(Injector);
71  private readonly overlay = inject(Overlay);
72  private readonly overlayPositionBuilder = inject(OverlayPositionBuilder);
73  private readonly platformId = inject(PLATFORM_ID);
74  private readonly renderer = inject(Renderer2);
75 
76  private ariaEffectRef?: ReturnType<typeof effect>;
77  private componentRef?: ComponentRef<ZardTooltipComponent>;
78  private delaySubject?: Subject<DelayConfig>;
79  private listenersRefs: (() => void)[] = [];
80  private overlayRef?: OverlayRef;
81 
82  readonly zHideDelay = input(100, { transform: numberAttribute });
83// … truncated