From 114b48bba229a6a0b7945058378c4930005333d8 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sat, 15 Oct 2022 10:40:28 +0800
Subject: [PATCH] fix(tooltip): use placement and alignment to calculate x
 position of tooltip

---
 .../src/composition/use-tooltip-position.ts   | 63 ++++++++++++-------
 packages/ui-vue/src/components/tooltip.vue    |  2 +-
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts b/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
index bce3b24..7ac16b9 100644
--- a/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
+++ b/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
@@ -61,12 +61,6 @@ export function useTooltipPosition(
         tooltipContentBound: DOMRect,
         arrowBound: DOMRect
     ) {
-        // let offsetY = 0;
-        // let offsetAlignment = 0;
-        // const verticalAlignment = placement.indexOf('bottom') > -1 ? 'bottom' : (placement.indexOf('top') > -1 ? 'top' : 'middle');
-        // const originalPositionY = verticalAlignment === 'bottom' ? hostBound.bottom : hostBound.top;
-
-
         const placementAndAlignmentArray = placementAndAlignment.split('-');
         const placement = placementAndAlignmentArray[0];
         const alignment = placementAndAlignmentArray[1] || 'middle';
@@ -87,27 +81,48 @@ export function useTooltipPosition(
         return originalPositionY + offsetY + offsetAlignment;
     }
 
-    function calculateTooltipLeftPosition(placement: TooltipPlacement, hostBound: DOMRect, tooltipBound: DOMRect, arrowBound: DOMRect) {
+    function calculateTooltipLeftPosition(
+        placementAndAlignment: TooltipPlacement,
+        hostBound: DOMRect,
+        tooltipContentBound: DOMRect,
+        arrowBound: DOMRect
+    ) {
+        const placementAndAlignmentArray = placementAndAlignment.split('-');
+        const placement = placementAndAlignmentArray[0];
+        const alignment = placementAndAlignmentArray[1] || 'middle';
+        const marginSpace = (tooltipBound.width - tooltipContentBound.width) / 2;
+        const originalPositionX = placement === 'right' ? hostBound.right : hostBound.left;
 
-        let offsetX = 0;
-        const horizontalAlignment = placement.indexOf('right') > -1 ? 'right' : (placement.indexOf('left') > -1 ? 'left' : 'center');
-        const originalPositionX = horizontalAlignment === 'right' ? hostBound.right : hostBound.left;
+        const offsetX = placement === 'left' ?
+            0 - marginSpace - tooltipContentBound.width - arrowBound.width :
+            (placement === 'right' ? (0 - marginSpace) + arrowBound.width : 0);
 
-        if (['left', 'left-top', 'left-bottom'].includes(placement)) {
-            offsetX = 0 - tooltipBound.width - space;
-        } else if (['top', 'bottom'].includes(placement)) {
-            offsetX = (hostBound.width - tooltipBound.width) / 2;
-        } else if (['right', 'right-top', 'right-bottom'].includes(placement)) {
-            offsetX = space;
-        } else if (['top-right', 'bottom-right'].includes(placement)) {
-            offsetX = 0 - tooltipBound.width;
-        } else if (['top-left', 'bottom-left'].includes(placement)) {
-            offsetX = 0;
-        } else {
-            return 0;
-        }
+        const offsetAlignment = ['top', 'bottom'].includes(placement) ?
+            (
+                alignment === 'middle' ?
+                    (hostBound.width - tooltipContentBound.width) / 2 :
+                    (alignment === 'right' ? hostBound.width - tooltipContentBound.width : 0)
+            ) : 0;
 
-        return originalPositionX + offsetX;
+        // let offsetX = 0;
+        // const horizontalAlignment = placement.indexOf('right') > -1 ? 'right' : (placement.indexOf('left') > -1 ? 'left' : 'center');
+        // const originalPositionX = horizontalAlignment === 'right' ? hostBound.right : hostBound.left;
+
+        // if (['left', 'left-top', 'left-bottom'].includes(placement)) {
+        //     offsetX = 0 - tooltipBound.width - space;
+        // } else if (['top', 'bottom'].includes(placement)) {
+        //     offsetX = (hostBound.width - tooltipBound.width) / 2;
+        // } else if (['right', 'right-top', 'right-bottom'].includes(placement)) {
+        //     offsetX = space;
+        // } else if (['top-right', 'bottom-right'].includes(placement)) {
+        //     offsetX = 0 - tooltipBound.width;
+        // } else if (['top-left', 'bottom-left'].includes(placement)) {
+        //     offsetX = 0;
+        // } else {
+        //     return 0;
+        // }
+
+        return originalPositionX + offsetX + offsetAlignment;
     }
 
     function calculateTooltipRightPosition(placement: TooltipPlacement, hostBound: DOMRect, tooltipBound: DOMRect, arrowBound: DOMRect) {
diff --git a/packages/ui-vue/src/components/tooltip.vue b/packages/ui-vue/src/components/tooltip.vue
index bac9e03..8374b3d 100644
--- a/packages/ui-vue/src/components/tooltip.vue
+++ b/packages/ui-vue/src/components/tooltip.vue
@@ -8,5 +8,5 @@ const tooltipProps = { placement: 'bottom' };
 <template>
     <Tooltip> </Tooltip>
 
-    <Button v-tooltip="{ placement: 'left' }"> 显示提示信息 </Button>
+    <Button v-tooltip="{ placement: 'right' }"> 显示提示信息 </Button>
 </template>