refactor(tooltip): align to new guidelines

api-goldens/element-ng/tooltip/index.api.md

@@ -20,7 +20,6 @@ export class SiTooltipDirective implements OnDestroy {
     readonly placement: i0.InputSignal<"auto" | "top" | "start" | "end" | "bottom">;
     readonly siTooltip: i0.InputSignal<TemplateRef<any> | TranslatableString>;
     readonly tooltipContext: i0.InputSignal<unknown>;
-    readonly triggers: i0.InputSignal<"" | "focus" | undefined>;
 }
 
 // @public (undocumented)

playwright/e2e/element-examples/si-tooltip.spec.ts

@@ -7,11 +7,11 @@ import { expect, test } from '../../support/test-helpers';
 test.describe('Tooltip', () => {
   const example = 'si-tooltip/si-tooltip';
 
-  ['top', 'end', 'start', 'bottom'].forEach(direction => {
+  ['auto', 'top', 'end', 'start', 'bottom'].forEach(direction => {
     test(direction, async ({ page, si }) => {
       await si.visitExample(example);
 
-      await page.locator('.btn').getByText(`Tooltip on ${direction}`).dispatchEvent('mouseenter');
+      await page.locator(`[placement="${direction}"]`).focus();
       await expect(page.locator('.tooltip')).toHaveCount(1);
 
       await si.runVisualAndA11yTests(direction);

playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto.yaml

@@ -0,0 +1,26 @@
+- group "File operations":
+  - button "Open file"
+  - button "Save"
+  - button "Download"
+  - button "Share"
+- group "Basic actions":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Template examples":
+  - button "Template HTML example"
+  - button "Template example"
+- heading "Tooltip placement" [level=4]
+- group "Tooltip placement":
+  - button "Auto placement"
+  - button "Top"
+  - button "Bottom"
+  - button "Start"
+  - button "End"
+- heading "Other examples" [level=4]
+- button "A long time ago in a galaxy far, far away..."
+- tablist:
+  - tab
+  - tab
+  - tab
+- tooltip "Auto placement"

playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom.yaml

@@ -1,9 +1,26 @@
-- button "Tooltip on top"
-- button "Tooltip on end"
-- button "Tooltip auto"
-- button "Tooltip on start"
-- button "Tooltip on bottom"
-- button "Dismissible tooltip"
-- button "Tooltip template html"
-- button "Tooltip template"
-- tooltip "Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+- group "File operations":
+  - button "Open file"
+  - button "Save"
+  - button "Download"
+  - button "Share"
+- group "Basic actions":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Template examples":
+  - button "Template HTML example"
+  - button "Template example"
+- heading "Tooltip placement" [level=4]
+- group "Tooltip placement":
+  - button "Auto placement"
+  - button "Top"
+  - button "Bottom"
+  - button "Start"
+  - button "End"
+- heading "Other examples" [level=4]
+- button "A long time ago in a galaxy far, far away..."
+- tablist:
+  - tab
+  - tab
+  - tab
+- tooltip "Bottom"

playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end.yaml

@@ -1,9 +1,26 @@
-- button "Tooltip on top"
-- button "Tooltip on end"
-- button "Tooltip auto"
-- button "Tooltip on start"
-- button "Tooltip on bottom"
-- button "Dismissible tooltip"
-- button "Tooltip template html"
-- button "Tooltip template"
-- tooltip "Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+- group "File operations":
+  - button "Open file"
+  - button "Save"
+  - button "Download"
+  - button "Share"
+- group "Basic actions":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Template examples":
+  - button "Template HTML example"
+  - button "Template example"
+- heading "Tooltip placement" [level=4]
+- group "Tooltip placement":
+  - button "Auto placement"
+  - button "Top"
+  - button "Bottom"
+  - button "Start"
+  - button "End"
+- heading "Other examples" [level=4]
+- button "A long time ago in a galaxy far, far away..."
+- tablist:
+  - tab
+  - tab
+  - tab
+- tooltip "End"

playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start.yaml

@@ -1,9 +1,26 @@
-- button "Tooltip on top"
-- button "Tooltip on end"
-- button "Tooltip auto"
-- button "Tooltip on start"
-- button "Tooltip on bottom"
-- button "Dismissible tooltip"
-- button "Tooltip template html"
-- button "Tooltip template"
-- tooltip "Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+- group "File operations":
+  - button "Open file"
+  - button "Save"
+  - button "Download"
+  - button "Share"
+- group "Basic actions":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Template examples":
+  - button "Template HTML example"
+  - button "Template example"
+- heading "Tooltip placement" [level=4]
+- group "Tooltip placement":
+  - button "Auto placement"
+  - button "Top"
+  - button "Bottom"
+  - button "Start"
+  - button "End"
+- heading "Other examples" [level=4]
+- button "A long time ago in a galaxy far, far away..."
+- tablist:
+  - tab
+  - tab
+  - tab
+- tooltip "Start"

playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top.yaml

@@ -1,9 +1,26 @@
-- button "Tooltip on top"
-- button "Tooltip on end"
-- button "Tooltip auto"
-- button "Tooltip on start"
-- button "Tooltip on bottom"
-- button "Dismissible tooltip"
-- button "Tooltip template html"
-- button "Tooltip template"
-- tooltip "Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+- group "File operations":
+  - button "Open file"
+  - button "Save"
+  - button "Download"
+  - button "Share"
+- group "Basic actions":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Template examples":
+  - button "Template HTML example"
+  - button "Template example"
+- heading "Tooltip placement" [level=4]
+- group "Tooltip placement":
+  - button "Auto placement"
+  - button "Top"
+  - button "Bottom"
+  - button "Start"
+  - button "End"
+- heading "Other examples" [level=4]
+- button "A long time ago in a galaxy far, far away..."
+- tablist:
+  - tab
+  - tab
+  - tab
+- tooltip "Top"

projects/element-ng/tooltip/si-tooltip.component.scss

@@ -0,0 +1,29 @@
+@use '@siemens/element-theme/src/styles/variables';
+
+$transition-duration: variables.element-transition-duration(0.15s);
+
+%transition {
+  transition:
+    opacity $transition-duration ease-out,
+    transform $transition-duration ease-out;
+}
+
+:host {
+  opacity: 1;
+  transform: scale(1);
+  @extend %transition;
+
+  &.tooltip-leave {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  .tooltip {
+    @extend %transition;
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}

projects/element-ng/tooltip/si-tooltip.component.ts

@@ -20,12 +20,15 @@ import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-
 @Component({
   selector: 'si-tooltip',
   imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],
-  templateUrl: './si-tooltip.component.html'
+  templateUrl: './si-tooltip.component.html',
+  styleUrl: './si-tooltip.component.scss',
+  host: {
+    'animate.leave': 'tooltip-leave'
+  }
 })
 export class TooltipComponent {
   /** @defaultValue '' */
   readonly tooltip = input<TranslatableString | TemplateRef<any> | Type<any>>('');
-
   protected readonly tooltipPositionClass = signal('');
   protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);
   /** @internal */

projects/element-ng/tooltip/si-tooltip.directive.spec.ts

@@ -15,17 +15,12 @@ describe('SiTooltipDirective', () => {
 
     @Component({
       imports: [SiTooltipModule],
-      template: `<button
-        type="button"
-        siTooltip="test tooltip"
-        [isDisabled]="isDisabled"
-        [triggers]="triggers"
+      template: `<button type="button" siTooltip="test tooltip" [isDisabled]="isDisabled"
         >Test</button
       >`
     })
     class TestHostComponent {
       isDisabled = false;
-      triggers: '' | 'focus' = '';
     }
 
     beforeEach(async () => {
@@ -48,7 +43,9 @@ describe('SiTooltipDirective', () => {
 
     it('should open on focus', () => {
       button.dispatchEvent(new Event('focus'));
-      jasmine.clock().tick(500);
+      // Focus should be immediate (no delay) but still need to tick for setTimeout(0)
+      jasmine.clock().tick(0);
+      fixture.detectChanges();
 
       expect(document.querySelector('.tooltip')).toBeTruthy();
       expect(document.querySelector('.tooltip')?.innerHTML).toContain('test tooltip');
@@ -70,21 +67,15 @@ describe('SiTooltipDirective', () => {
 
     it('should show tooltip on mouse over', () => {
       button.dispatchEvent(new MouseEvent('mouseenter'));
-      expect(document.querySelector('.tooltip')).toBeTruthy();
-
-      button.dispatchEvent(new MouseEvent('mouseleave'));
+      // hover should have 500ms delay
       expect(document.querySelector('.tooltip')).toBeFalsy();
-    });
 
-    it('should not show tooltip on mouse over with focus trigger', () => {
-      component.triggers = 'focus';
-      fixture.changeDetectorRef.markForCheck();
+      jasmine.clock().tick(500);
       fixture.detectChanges();
+      expect(document.querySelector('.tooltip')).toBeTruthy();
 
-      ['mouseenter', 'mouseleave'].forEach(e => {
-        button.dispatchEvent(new MouseEvent(e));
-        expect(document.querySelector('.tooltip')).toBeFalsy();
-      });
+      button.dispatchEvent(new MouseEvent('mouseleave'));
+      expect(document.querySelector('.tooltip')).toBeFalsy();
     });
   });