feat: Added tooltip component

PoC implementation

Author: rkaraivanov

src/animations/player.ts

@@ -71,6 +71,15 @@ class AnimationController implements ReactiveController {
     );
   }
 
+  public async playExclusive(animation: AnimationReferenceMetadata) {
+    const [_, event] = await Promise.all([
+      this.stopAll(),
+      this.play(animation),
+    ]);
+
+    return event.type === 'finish';
+  }
+
   public hostConnected() {}
 }
 

src/components/common/util.ts

@@ -293,9 +293,9 @@ export function isString(value: unknown): value is string {
 }
 
 /**
- * Returns whether a given collection has at least one member.
+ * Returns whether a given collection is empty.
  */
-export function isEmpty<T, U extends string>(
+export function isEmpty<T, U extends object>(
   x: ArrayLike<T> | Set<T> | Map<U, T>
 ): boolean {
   return 'length' in x ? x.length < 1 : x.size < 1;

src/components/common/utils.spec.ts

@@ -202,6 +202,14 @@ export function simulatePointerLeave(
   );
 }
 
+export function simulateFocus(node: Element) {
+  node.dispatchEvent(new FocusEvent('focus'));
+}
+
+export function simulateBlur(node: Element) {
+  node.dispatchEvent(new FocusEvent('blur'));
+}
+
 export function simulatePointerDown(
   node: Element,
   options?: PointerEventInit,

src/components/popover/popover.ts

@@ -1,8 +1,12 @@
 import {
   type Middleware,
+  type MiddlewareData,
+  type Placement,
+  arrow,
   autoUpdate,
   computePosition,
   flip,
+  inline,
   limitShift,
   offset,
   shift,
@@ -14,6 +18,7 @@ import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import {
+  first,
   getElementByIdFromRoot,
   isEmpty,
   isString,
@@ -72,6 +77,19 @@ export default class IgcPopoverComponent extends LitElement {
   @property()
   public anchor?: Element | string;
 
+  /**
+   * Element to render as an "arrow" element for the current popover.
+   */
+  @property({ attribute: false })
+  public arrow: HTMLElement | null = null;
+
+  /**
+   * Improves positioning for inline reference elements that span over multiple lines.
+   * Useful for tooltips or similar components.
+   */
+  @property({ type: Boolean, reflect: true })
+  public inline = false;
+
   /**
    * When enabled this changes the placement of the floating element in order to keep it
    * in view along the main axis.
@@ -127,7 +145,9 @@ export default class IgcPopoverComponent extends LitElement {
     this.open ? this.show() : this.hide();
   }
 
+  @watch('arrow', { waitUntilFirstUpdate: true })
   @watch('flip', { waitUntilFirstUpdate: true })
+  @watch('inline', { waitUntilFirstUpdate: true })
   @watch('offset', { waitUntilFirstUpdate: true })
   @watch('placement', { waitUntilFirstUpdate: true })
   @watch('sameWidth', { waitUntilFirstUpdate: true })
@@ -187,6 +207,10 @@ export default class IgcPopoverComponent extends LitElement {
       middleware.push(offset(this.offset));
     }
 
+    if (this.inline) {
+      middleware.push(inline());
+    }
+
     if (this.shift) {
       middleware.push(
         shift({
@@ -195,6 +219,10 @@ export default class IgcPopoverComponent extends LitElement {
       );
     }
 
+    if (this.arrow) {
+      middleware.push(arrow({ element: this.arrow }));
+    }
+
     if (this.flip) {
       middleware.push(flip());
     }
@@ -226,17 +254,47 @@ export default class IgcPopoverComponent extends LitElement {
       return;
     }
 
-    const { x, y } = await computePosition(this.target, this._container, {
-      placement: this.placement ?? 'bottom-start',
-      middleware: this._createMiddleware(),
-      strategy: 'fixed',
-    });
+    const { x, y, middlewareData, placement } = await computePosition(
+      this.target,
+      this._container,
+      {
+        placement: this.placement ?? 'bottom-start',
+        middleware: this._createMiddleware(),
+        strategy: 'fixed',
+      }
+    );
 
     Object.assign(this._container.style, {
       left: 0,
       top: 0,
       transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
     });
+
+    this._positionArrow(placement, middlewareData);
+  }
+
+  private _positionArrow(placement: Placement, data: MiddlewareData) {
+    if (!data.arrow) {
+      return;
+    }
+
+    const { x, y } = data.arrow;
+
+    const staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right',
+    }[first(placement.split('-'))]!;
+
+    // TODO: Clean-up this stuff
+    Object.assign(this.arrow!.style, {
+      left: x !== null ? `${roundByDPR(x!)}px` : '',
+      top: y !== null ? `${roundByDPR(y!)}px` : '',
+      right: '',
+      bottom: '',
+      [staticSide]: '-4px',
+    });
   }
 
   private _anchorSlotChange() {

src/components/tooltip/themes/tooltip.base.scss

@@ -0,0 +1,30 @@
+@use 'styles/common/component';
+@use 'styles/utilities' as *;
+
+:host {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+
+[part="base"] {
+    @include type-style('body-2');
+
+    background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgb(255 255 255 / 40%) 0%, rgb(0 0 0 / 25%) 200%);
+    background-blend-mode: multiply;
+    padding: 0.25rem;
+    color: #fff;
+}
+
+#arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    background: inherit;
+}
+
+igc-popover::part(container) {
+    background-color: transparent;
+}

src/components/tooltip/tooltip-event-controller.ts

@@ -0,0 +1,78 @@
+import type { ReactiveController } from 'lit';
+import type IgcTooltipComponent from './tooltip.js';
+
+type TooltipAnchor = Element | null | undefined;
+type TooltipTriggers = {
+  show: string[];
+  hide: string[];
+};
+
+class TooltipController implements ReactiveController {
+  private readonly _host: IgcTooltipComponent;
+  private _showTriggers: string[] = [];
+  private _hideTriggers: string[] = [];
+
+  constructor(host: IgcTooltipComponent) {
+    this._host = host;
+    this._host.addController(this);
+  }
+
+  /**
+   * Sets the current collections of show/hide triggers on the given anchor for the tooltip.
+   * Removes any previously set triggers.
+   */
+  public set(anchor: TooltipAnchor, triggers: TooltipTriggers) {
+    if (!anchor) {
+      return;
+    }
+
+    const { show, hide } = triggers;
+    this._showTriggers = show;
+    this._hideTriggers = hide;
+
+    this.remove(anchor);
+
+    for (const trigger of show) {
+      anchor.addEventListener(trigger, this._host.show);
+    }
+
+    for (const trigger of hide) {
+      anchor.addEventListener(trigger, this._host[hideOnTrigger]);
+    }
+  }
+
+  /** Removes all tooltip trigger events from the given anchor */
+  public remove(anchor?: TooltipAnchor) {
+    if (!anchor) {
+      return;
+    }
+
+    for (const trigger of this._showTriggers) {
+      anchor.removeEventListener(trigger, this._host.show);
+    }
+
+    for (const trigger of this._hideTriggers) {
+      anchor.removeEventListener(trigger, this._host[hideOnTrigger]);
+    }
+  }
+
+  /** @internal */
+  public hostConnected(): void {
+    this._host.addEventListener('pointerenter', this._host.show);
+    this._host.addEventListener('pointerleave', this._host[hideOnTrigger]);
+  }
+
+  /** @internal */
+  public hostDisconnected(): void {
+    this._host.removeEventListener('pointerenter', this._host.show);
+    this._host.removeEventListener('pointerleave', this._host[hideOnTrigger]);
+  }
+}
+
+export const hideOnTrigger = Symbol();
+
+export function addTooltipController(
+  host: IgcTooltipComponent
+): TooltipController {
+  return new TooltipController(host);
+}

src/components/tooltip/tooltip-service.ts

@@ -0,0 +1,67 @@
+import { isServer } from 'lit';
+import { escapeKey } from '../common/controllers/key-bindings.js';
+import { isEmpty, last } from '../common/util.js';
+import { hideOnTrigger } from './tooltip-event-controller.js';
+import type IgcTooltipComponent from './tooltip.js';
+
+class TooltipEscapeCallbacks {
+  private _collection: Map<IgcTooltipComponent, CallableFunction> = new Map();
+
+  /**
+   * Sets the global Escape key handler for closing any open igc-tooltip instances.
+   *
+   */
+  private _setListeners(): void {
+    if (isServer) {
+      return;
+    }
+
+    if (isEmpty(this._collection)) {
+      document.documentElement.addEventListener('keydown', this);
+    }
+  }
+
+  /**
+   * Removes the global Escape key handler for closing any open igc-tooltip instances.
+   */
+  private _removeListeners(): void {
+    if (isServer) {
+      return;
+    }
+
+    if (isEmpty(this._collection)) {
+      document.documentElement.removeEventListener('keydown', this);
+    }
+  }
+
+  public add(instance: IgcTooltipComponent): void {
+    if (this._collection.has(instance)) {
+      return;
+    }
+
+    this._setListeners();
+    this._collection.set(instance, instance[hideOnTrigger]);
+  }
+
+  public remove(instance: IgcTooltipComponent): void {
+    if (!this._collection.has(instance)) {
+      return;
+    }
+
+    this._collection.delete(instance);
+    this._removeListeners();
+  }
+
+  /** @internal */
+  public handleEvent(event: KeyboardEvent): void {
+    if (event.key !== escapeKey) {
+      return;
+    }
+
+    const callback = last(Array.from(this._collection.values()));
+    callback?.();
+  }
+}
+
+const service = new TooltipEscapeCallbacks();
+export default service;