refactor(tooltip): move all logic into the service

[spike-rabbit]

We currently cannot attach tooltips dynamically
on our components if the host element is interactive element.

When having the tooltip as a service, we can do this.

Alternatives considered:

• extend the tooltip directive
• make the tooltip input a model

Describe in detail what your merge request does and why. Add relevant
screenshots and reference related issues via Closes #XY or Related to #XY.

---

• I confirm that this MR follows the contribution guidelines.

[gemini-code-assist]

Code Review

This pull request refactors the tooltip logic by moving it from the directive into a dedicated service. This is a good architectural improvement that should make it easier to use tooltips dynamically.

I've found a few issues with the implementation:

• There's a critical issue regarding Server-Side Rendering (SSR) where browser-specific code is not properly guarded.
• The tests contain a focused test suite (fdescribe) which must be removed.
• There's an inconsistency in a delay value used in tests compared to the implementation.
• A minor simplification can be made in one of the directives.

Please see my detailed comments for suggestions on how to address these points.

[gemini-code-assist]

The TooltipRef constructor directly subscribes to DOM events using fromEvent. This will fail during Server-Side Rendering (SSR) as these events and nativeElement are browser-specific. This change removes a previous isPlatformBrowser check, introducing a regression.

This violates a general rule for our repository: 'When using browser-dependent UI features like Angular CDK Overlay, ensure they are only executed in a browser environment. Use a check like isPlatformBrowser to prevent errors during Server-Side Rendering (SSR).'

To fix this, you should ensure this logic only runs in a browser environment. The cleanest way would be to inject PLATFORM_ID in SiTooltipService and pass it down to TooltipRef.

Here is an example of how you could implement this:

1. Modify SiTooltipService to inject PLATFORM_ID and pass it to TooltipRef:

   // projects/element-ng/tooltip/si-tooltip.service.ts
   @Injectable()
   export class SiTooltipService {
     private overlay = inject(Overlay);
     private platformId = inject(PLATFORM_ID); // Add this
   
     createTooltip(config: { /*...*/ }): TooltipRef {
       // ...
       return new TooltipRef(
         getOverlay(config.element, this.overlay, false, config.placement),
         config.element,
         injector,
         this.platformId // Pass it here
       );
     }
   }

2. Update TooltipRef to accept platformId and guard the browser-specific code:

   // projects/element-ng/tooltip/si-tooltip.service.ts
   class TooltipRef {
     // ...
     constructor(
       private overlayRef: OverlayRef,
       private element: ElementRef,
       private injector: Injector | undefined,
       private platformId: object // Add this
     ) {
       if (isPlatformBrowser(this.platformId)) {
         const nativeElement = this.element.nativeElement;
         // Move all fromEvent subscriptions inside this block
         fromEvent(nativeElement, 'focus')
           .pipe(takeUntil(this.destroy$))
           .subscribe(event => this.onFocus(event));
         // ... other subscriptions
       }
     }
     // ...
   }

You will also need to add the necessary imports for PLATFORM_ID and isPlatformBrowser.

References

1. When using browser-dependent UI features like Angular CDK Overlay, ensure they are only executed in a browser environment. Use a check like isPlatformBrowser to prevent errors during Server-Side Rendering (SSR).

[dauriamarco]

Somehow the auto placement looks different now, any idea why?