Merged PR 1855: 5000 Retoure // Info -Tooltip zur Suchseite hinzufügen

Related work items: #5000

libs/ui/tooltip/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/tooltip.directive';
+export * from './lib/tooltip-icon.component';

libs/ui/tooltip/src/lib/tooltip-icon.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { isaOtherInfo } from '@isa/icons';
+import { TooltipDirective } from './tooltip.directive';
+
+@Component({
+  selector: 'ui-tooltip-icon',
+  template: `<ng-icon name="isaOtherInfo" size="1.5rem"></ng-icon>`,
+  imports: [NgIcon],
+  providers: [provideIcons({ isaOtherInfo })],
+  host: {
+    '[class]': '["ui-tooltip-icon"]',
+  },
+  hostDirectives: [
+    {
+      directive: TooltipDirective,
+      inputs: ['title', 'content', 'triggerOn'],
+    },
+  ],
+})
+export class TooltipIconComponent {}

libs/ui/tooltip/src/lib/tooltip.directive.ts

@@ -63,7 +63,7 @@ export type TooltipTrigger =
     '(mouseleave)': 'onMouseLeave()',
     '(focus)': 'onFocusEvent()',
     '(blur)': 'onBlurEvent()',
-    tabindex: '0',
+    'tabindex': '0',
   },
   standalone: true,
 })
@@ -87,7 +87,7 @@ export class TooltipDirective implements OnDestroy {
 
   /**
    * Array of triggers that will cause the tooltip to show.
-   * Defaults to `['click', 'hover', 'focus']`.
+   * Defaults to `['click', 'focus']`.
    */
   triggerOn = input<TooltipTrigger[]>([
     TooltipTrigger.Click,
@@ -117,7 +117,7 @@ export class TooltipDirective implements OnDestroy {
    * @param trigger The trigger event to check.
    * @returns True if the tooltip should show for the trigger, false otherwise.
    */
-  #shouldShowForTrigger(trigger: TooltipTrigger): boolean {
+  #shouldForTrigger(trigger: TooltipTrigger): boolean {
     return this.triggerOn().includes(trigger);
   }
 
@@ -134,24 +134,24 @@ export class TooltipDirective implements OnDestroy {
         originX: 'end',
         originY: 'top',
         overlayX: 'start',
-        overlayY: 'center',
+        overlayY: 'top',
         offsetX: this.#offset,
-        offsetY: this.#offset,
+        offsetY: -this.#offset,
       },
       {
         // Left position
         originX: 'start',
         originY: 'top',
         overlayX: 'end',
-        overlayY: 'center',
+        overlayY: 'top',
         offsetX: -this.#offset,
-        offsetY: this.#offset,
+        offsetY: -this.#offset,
       },
       {
         // Bottom position
         originX: 'start',
         originY: 'bottom',
-        overlayX: 'center',
+        overlayX: 'start',
         overlayY: 'top',
         offsetX: -this.#offset,
         offsetY: this.#offset,
@@ -160,7 +160,7 @@ export class TooltipDirective implements OnDestroy {
         // Top position
         originX: 'start',
         originY: 'top',
-        overlayX: 'center',
+        overlayX: 'start',
         overlayY: 'bottom',
         offsetX: -this.#offset,
         offsetY: -this.#offset,
@@ -219,30 +219,27 @@ export class TooltipDirective implements OnDestroy {
 
   /**
    * Hides the tooltip only if the trigger matches the open trigger.
-   * If force is true, always hides and resets the open trigger.
    */
-  hide(trigger?: TooltipTrigger, force = false) {
+  hide(trigger?: TooltipTrigger) {
     if (!this.#overlayRef) {
       return;
     }
-    // Exception: If opened by hover, and a click occurs, switch to click
+
     if (
-      !force &&
-      this.#openTrigger &&
-      trigger &&
-      this.#openTrigger !== trigger
+      trigger === TooltipTrigger.Click &&
+      this.#openTrigger !== TooltipTrigger.Click
     ) {
-      // Special case: If open by hover, and click occurs, switch to click
-      if (
-        this.#openTrigger === TooltipTrigger.Hover &&
-        trigger === TooltipTrigger.Click
-      ) {
-        this.#openTrigger = TooltipTrigger.Click;
-        return; // Do not close, now only click can close
-      }
-      // Otherwise, ignore close attempt from a different trigger
-      return;
+      this.#openTrigger = TooltipTrigger.Click;
+      return; // Do not close if the click trigger is not the one that opened it
     }
+
+    if (trigger !== TooltipTrigger.Click) {
+      if (this.#openTrigger !== trigger) {
+        // If the tooltip is not opened by the same trigger, do not close
+        return;
+      }
+    }
+
     this.#overlayRef.detach();
     this.#overlayRef.dispose();
     this.#overlayRef = null;
@@ -270,7 +267,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onClickEvent(event: MouseEvent) {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Click)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Click)) {
       event.preventDefault();
       event.stopPropagation();
       this.toggle(TooltipTrigger.Click);
@@ -283,7 +280,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onMouseEnter() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Hover)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Hover)) {
       if (!this.#overlayRef) {
         this.show(TooltipTrigger.Hover);
       }
@@ -296,7 +293,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onMouseLeave() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Hover)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Hover)) {
       this.hide(TooltipTrigger.Hover);
     }
   }
@@ -307,7 +304,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onFocusEvent() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Focus)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Focus)) {
       if (!this.#overlayRef) {
         this.show(TooltipTrigger.Focus);
       }
@@ -320,7 +317,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onBlurEvent() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Focus)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Focus)) {
       this.hide(TooltipTrigger.Focus);
     }
   }

libs/ui/tooltip/src/tooltip.scss

@@ -17,7 +17,7 @@
 }
 
 .ui-tooltip-content {
-  @apply isa-text-body-2-bold text-isa-neutral-600;
+  @apply isa-text-body-2-regular text-isa-neutral-600;
 }
 
 /*
@@ -34,3 +34,7 @@
   opacity: 1;
   transition: opacity 150ms ease-in-out;
 }
+
+.ui-tooltip-icon {
+  @apply inline-flex content-center text-isa-accent-blue translate-y-1;
+}