feat(quantic): quantic tooltip made responsive (#3428)

* quantic tooltip made responsive * quantic tooltip made responsive * quantic tooltip made responsive * quantic tooltip made responsive * quantic tooltip made responsive * animation of tooltip improved * css value simplified * Update packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.js Co-authored-by: Simon Milord <[email protected]> * animation strategy of the tooltip arrow improved * final adjustment --------- Co-authored-by: Simon Milord <[email protected]>
coveo · Nov 27, 2023 · 633784d · 633784d
1 parent 8ab8716
commit 633784d
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 17 deletions.
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.html b/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.html
@@ -17,7 +17,7 @@
         {citationTitle}
       </p>
     </a>
-    <c-quantic-tooltip light-theme class="slds-show_medium">
+    <c-quantic-tooltip light-theme class="slds-show_medium" target={template.host}>
       <div class="citation__tooltip" slot="content">
         <div data-cy="citation__tooltip-uri" class="slds-text-body_small slds-text-color_weak slds-truncate slds-var-p-vertical_xxx-small">{clickUri}</div>
         <div data-cy="citation__tooltip-title" class="slds-text-title_bold slds-var-p-vertical_xx-small">{citationTitle}</div>

diff --git a/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/quanticStatefulButton.html b/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/quanticStatefulButton.html
@@ -12,7 +12,7 @@
       </template>
     </button>
     <template lwc:if={tooltip}>
-      <c-quantic-tooltip>
+      <c-quantic-tooltip target={template.host}>
         <div slot="content">{tooltip}</div>
       </c-quantic-tooltip>
     </template>

diff --git a/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.css b/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.css
@@ -1,24 +1,81 @@
+:host {
+  --x-translation: var(--adapted-x-translation, 0px);
+  --max-width: var(--adapted-max-width, 20rem);
+}
+
 .tooltip__content {
   left: 50%;
-  transform: translate(-50%, -100%);
+  transition: transform 0s linear 0s, opacity 0.1s linear 0s, visibility 0.1s linear 0s;
+  z-index: 2;
+}
+
+.tooltip__content--positioned-above {
+  transform: translate(calc(-50% + var(--x-translation)), -100%);
   top: -0.7rem;
 }
 
+.tooltip__content--positioned-below {
+  transform: translate(calc(-50% + var(--x-translation)), 0.7rem);
+}
+
 .tooltip__content--visible {
   visibility: visible;
   opacity: 1;
 }
 
-.tooltip__content--light {
+.tooltip__content--light,
+.slds-popover_tooltip {
   width: max-content;
-  max-width: var(--slds-c-tooltip-sizing-max-width, var(--sds-c-tooltip-sizing-max-width, var(--lwc-sizeMedium, 20rem)));
 }
 
-.slds-nubbin_bottom-left:before,
-.slds-nubbin_bottom-left:after {
+.tooltip__arrow {
   left: 50%;
+  transform: translate(-50%, -100%);
+  transition: opacity 0.1s linear 0s, visibility 0.1s linear 0s;
+  z-index: 2;
 }
 
-.slds-popover_tooltip {
-  width: max-content;
+.tooltip__arrow--dark {
+  background-color: var(--slds-c-tooltip-color-background, rgb(3, 45, 96));
+}
+
+.tooltip__arrow--light {
+  background-color: var(--lwc-colorBackgroundAlt, rgb(255, 255, 255));
+}
+
+.tooltip__arrow--positioned-above {
+  top: -0.7rem;
+}
+
+.tooltip__arrow--positioned-below {
+  bottom: -0.7rem;
+}
+
+.tooltip__arrow--light.tooltip__arrow--positioned-above {
+  top: -0.74rem;
+}
+
+.tooltip__arrow--light.tooltip__arrow--positioned-below {
+  bottom: -0.74rem;
+}
+
+.tooltip__body {
+  max-width: min(20rem, var(--max-width));
+  width: fit-content;
+}
+
+.slds-nubbin_bottom:after,
+.slds-nubbin--bottom:after,
+.slds-nubbin_bottom:before,
+.slds-nubbin--bottom:before {
+  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+  border: solid 0.5px rgba(0, 0, 0, 0.16);
+}
+
+.slds-nubbin_top:after,
+.slds-nubbin--top:after,
+.slds-nubbin_top:before,
+.slds-nubbin--top:before {
+  clip-path: polygon(100% 0, 0 0, 0 100%);
+  border: solid 0.5px rgba(0, 0, 0, 0.16);
 }
diff --git a/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.html b/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.html
@@ -1,7 +1,9 @@
 <template>
   <div data-cy="tooltip" class={tooltipCSSClass} aria-hidden="true">
-    <div class="slds-popover__body">
+    <div class="slds-popover__body tooltip__body">
       <slot name="content"></slot>
     </div>
   </div>
+  <div class={tooltipArrowCSSClass}>
+  </div>
 </template>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.js b/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.js
@@ -1,11 +1,12 @@
+import {getAbsoluteWidth, getAbsoluteHeight} from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 
 /**
  * The `QuanticTooltip` displays a tooltip containing a small amount of text that can be displayed when hovering over certain elements.
  * This component should be used inside a container with a CSS position attribute set to the value `relative`
  * @category Internal
  * @example
- * <c-quantic-tooltip light-theme>
+ * <c-quantic-tooltip light-theme target={target}>
  *  <div slot="content">Tooltip content</div>
  * </c-quantic-tooltip>
  */
@@ -17,36 +18,122 @@ export default class QuanticTooltip extends LightningElement {
    */
   @api lightTheme = false;
   /**
+   * The element targeted by the tooltip.
    * @api
-   * Method tha shows the tooltip.
+   * @type {Element}
+   */
+  @api target;
+  /**
+   * @api
+   * Method that shows the tooltip.
    */
   @api showTooltip() {
     if (this.tooltipIsNotEmpty) {
+      this.updateTooltipDisplay();
       this.isVisible = true;
     }
   }
   /**
    * @api
-   * Method tha hides the tooltip.
+   * Method that hides the tooltip.
    */
   @api hideTooltip() {
+    this.resetPosition();
     this.isVisible = false;
   }
 
+  /** @type {boolean} */
+  displayTooltipAboveTarget = true;
   /** @type {boolean} */
   isVisible = false;
 
+  updateTooltipDisplay() {
+    this.updateTooltipMaxWidth();
+    this.updateTooltipVerticalPosition();
+    this.updateTooltipHorizontalPosition();
+  }
+
+  updateTooltipMaxWidth() {
+    const windowWidth = window.innerWidth;
+    const styles = this.template.host?.style;
+    styles.setProperty('--adapted-max-width', `${windowWidth}px`);
+  }
+
+  updateTooltipVerticalPosition = () => {
+    const tooltipHeight = getAbsoluteHeight(this.tooltip);
+    const targetHeight = getAbsoluteHeight(this.target);
+    const tooltipArrowHeight = 20;
+
+    const minimumYPositionToDisplayTooltipAbove =
+      tooltipHeight + targetHeight + tooltipArrowHeight;
+
+    if (this.tooltipYPosition < 0) {
+      this.displayTooltipAboveTarget = false;
+    } else if (this.tooltipYPosition > minimumYPositionToDisplayTooltipAbove) {
+      this.displayTooltipAboveTarget = true;
+    }
+  };
+
+  resetPosition() {
+    const styles = this.template.host?.style;
+    styles.setProperty('--adapted-x-translation', `0px`);
+  }
+
+  updateTooltipHorizontalPosition() {
+    const windowWidth = window.innerWidth;
+    const styles = this.template.host?.style;
+    const tooltipWidth = getAbsoluteWidth(this.tooltip);
+
+    if (this.tooltipXPosition < 0) {
+      styles.setProperty(
+        '--adapted-x-translation',
+        `${Math.abs(this.tooltipXPosition)}px`
+      );
+    } else if (this.tooltipXPosition + tooltipWidth > windowWidth) {
+      styles.setProperty(
+        '--adapted-x-translation',
+        `-${tooltipWidth - (windowWidth - this.tooltipXPosition)}px`
+      );
+    }
+  }
+
+  get tooltipYPosition() {
+    const rect = this.tooltip.getBoundingClientRect();
+    return rect.y || rect.top;
+  }
+
+  get tooltipXPosition() {
+    const rect = this.tooltip.getBoundingClientRect();
+    return rect.x || rect.left;
+  }
+
+  get tooltip() {
+    return this.template.querySelector('.slds-popover');
+  }
+
   get tooltipCSSClass() {
-    return `slds-popover ${
+    return `slds-popover  slds-is-absolute slds-fall-into-ground tooltip__content ${
       this.lightTheme ? 'tooltip__content--light' : 'slds-popover_tooltip'
-    } slds-nubbin_bottom-left slds-is-absolute tooltip__content slds-fall-into-ground ${
-      this.isVisible ? 'tooltip__content--visible' : ''
-    }`;
+    } ${
+      this.displayTooltipAboveTarget
+        ? 'tooltip__content--positioned-above'
+        : 'tooltip__content--positioned-below'
+    } ${this.isVisible ? 'tooltip__content--visible' : ''}`;
   }
 
   get tooltipIsNotEmpty() {
     /** @type {HTMLSlotElement} */
     const slot = this.template.querySelector('slot[name="content"]');
     return !!slot?.assignedNodes()?.length;
   }
+
+  get tooltipArrowCSSClass() {
+    return `tooltip__arrow slds-fall-into-ground slds-is-absolute ${
+      this.displayTooltipAboveTarget
+        ? 'tooltip__arrow--positioned-above slds-nubbin_bottom'
+        : 'tooltip__arrow--positioned-below slds-nubbin_top'
+    } ${this.lightTheme ? 'tooltip__arrow--light' : 'tooltip__arrow--dark'} ${
+      this.isVisible ? 'tooltip__content--visible' : ''
+    }`;
+  }
 }