feat(components): add "delayed" property to the post-tooltip

.changeset/ninety-spoons-design.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added a `delayed` property to the `post-tooltip` component to allow delaying its display for a few milliseconds after it is triggered.

packages/components/src/components.d.ts

@@ -280,6 +280,10 @@ export namespace Components {
           * Wheter or not to display a little pointer arrow
          */
         "arrow"?: boolean;
+        /**
+          * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+         */
+        "delayed": boolean;
         /**
           * Programmatically hide this tooltip
          */
@@ -736,6 +740,10 @@ declare namespace LocalJSX {
           * Wheter or not to display a little pointer arrow
          */
         "arrow"?: boolean;
+        /**
+          * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+         */
+        "delayed"?: boolean;
         /**
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */

packages/components/src/components/post-tooltip/post-tooltip.tsx

@@ -1,9 +1,12 @@
-import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';
 import { Placement } from '@floating-ui/dom';
 import { version } from '@root/package.json';
 import isFocusable from 'ally.js/is/focusable';
 import 'long-press-event';
 import { getAttributeObserver } from '@/utils/attribute-observer';
+import { checkEmptyOrType, timeout } from '@/utils';
+
+const OPEN_DELAY = 650; // matches HTML title delay
 
 /**
  * @slot default - Slot for the content of the tooltip.
@@ -110,6 +113,24 @@ export class PostTooltip {
    */
   @Prop() readonly arrow?: boolean = true;
 
+  /**
+   * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+   */
+  @Prop() readonly delayed: boolean = false;
+
+  @Watch('delayed')
+  validateDelayed() {
+    checkEmptyOrType(
+      this.delayed,
+      'boolean',
+      'The post-tooltip "delayed" property should be a boolean.',
+    );
+  }
+
+  connectedCallback() {
+    this.validateDelayed();
+  }
+
   componentDidLoad() {
     if (!this.host.id) {
       throw new Error(
@@ -168,6 +189,7 @@ export class PostTooltip {
    */
   @Method()
   async show(target: HTMLElement) {
+    if (this.delayed) await timeout(OPEN_DELAY);
     this.popoverRef.show(target);
   }
 

packages/components/src/components/post-tooltip/readme.md

@@ -10,6 +10,7 @@
 | Property    | Attribute   | Description                                                                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default |
 | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
 | `arrow`     | `arrow`     | Wheter or not to display a little pointer arrow                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                            | `true`  |
+| `delayed`   | `delayed`   | If `true`, the tooltip is displayed a few milliseconds after it is triggered                                                                                                                                                                                                                                              | `boolean`                                                                                                                                                            | `false` |
 | `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` |
 
 

packages/components/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './property-checkers';
 export * from './is-motion-reduced';
 export * from './sass-export';
+export * from './timeout';

packages/components/src/utils/timeout.ts

@@ -0,0 +1,3 @@
+export function timeout(delay: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, delay));
+}

packages/documentation/src/stories/components/tooltip/tooltip.stories.ts

@@ -23,6 +23,7 @@ const meta: MetaComponent = {
     innerHTML: 'Hi there 👋',
     backgroundColor: 'primary',
     placement: 'top',
+    delayed: false,
   },
   argTypes: {
     id: {
@@ -88,6 +89,7 @@ function render(args: Args) {
       class="hydrated bg-${args.backgroundColor}"
       placement="${ifDefined(args.placement)}"
       arrow="${ifDefined(args.arrow)}"
+      delayed="${ifDefined(args.delayed)}"
     >
       ${unsafeHTML(innerHTML)}
     </post-tooltip>