fix(quantic): adjust citation tooltip width in specific situations in…

…side Salesforce (#3538) tooltip width improved
coveo · Jan 23, 2024 · 5f6ffa0 · 5f6ffa0
1 parent 3dae63e
commit 5f6ffa0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.css b/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.css
@@ -41,7 +41,7 @@
 
 .citation__tooltip-text {
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

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 target={template.host}>
+      <c-quantic-tooltip>
         <div slot="content">{tooltip}</div>
       </c-quantic-tooltip>
     </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,6 +1,8 @@
 import {getAbsoluteWidth, getAbsoluteHeight} from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 
+const targetWidthToTooltipWidthRatio = 1.2;
+
 /**
  * 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`
@@ -55,8 +57,15 @@ export default class QuanticTooltip extends LightningElement {
 
   updateTooltipMaxWidth() {
     const windowWidth = window.innerWidth;
+    const targetWidth = getAbsoluteWidth(this.target);
+
+    const adaptedWidth =
+      targetWidth > 0
+        ? Math.min(windowWidth, targetWidth * targetWidthToTooltipWidthRatio)
+        : windowWidth;
+
     const styles = this.template.host?.style;
-    styles.setProperty('--adapted-max-width', `${windowWidth}px`);
+    styles.setProperty('--adapted-max-width', `${adaptedWidth}px`);
   }
 
   updateTooltipVerticalPosition = () => {