style: tooltip

Author: tangjinzhou

components/tooltip/Tooltip.tsx

@@ -188,11 +188,11 @@ export default defineComponent({
     const onPopupAlign = (domNode: HTMLElement, align: any) => {
       const placements = tooltipPlacements.value;
       // 当前返回的位置
-      const placement = Object.keys(placements).filter(
+      const placement = Object.keys(placements).find(
         key =>
           placements[key].points[0] === align.points[0] &&
           placements[key].points[1] === align.points[1],
-      )[0];
+      );
       if (!placement) {
         return;
       }
@@ -242,7 +242,7 @@ export default defineComponent({
       let arrowContentStyle: CSSProperties;
       if (color && !PresetColorRegex.test(color)) {
         formattedOverlayInnerStyle = { backgroundColor: color };
-        arrowContentStyle = { backgroundColor: color };
+        arrowContentStyle = { '--antd-arrow-background-color': color };
       }
 
       const vcTooltipProps = {

components/tooltip/style/index.less

@@ -19,9 +19,14 @@
   z-index: @zindex-tooltip;
   display: block;
   width: max-content;
+  width: intrinsic;
   max-width: @tooltip-max-width;
   visibility: visible;
 
+  &-content {
+    position: relative;
+  }
+
   &-hidden {
     display: none;
   }
@@ -60,13 +65,14 @@
     text-decoration: none;
     word-wrap: break-word;
     background-color: @tooltip-bg;
-    border-radius: @border-radius-base;
+    border-radius: @tooltip-border-radius;
     box-shadow: @box-shadow-base;
   }
 
   // Arrows
   &-arrow {
     position: absolute;
+    z-index: 2;
     display: block;
     width: @tooltip-arrow-rotate-width;
     height: @tooltip-arrow-rotate-width;
@@ -75,6 +81,13 @@
     pointer-events: none;
 
     &-content {
+      // Use linear gradient to mix box shadow of tooltip inner
+      --antd-arrow-background-color: linear-gradient(
+        to right bottom,
+        fadeout(@tooltip-bg, 10%),
+        @tooltip-bg
+      );
+
       position: absolute;
       top: 0;
       right: 0;
@@ -84,16 +97,18 @@
       width: @tooltip-arrow-width;
       height: @tooltip-arrow-width;
       margin: auto;
-      background-color: @tooltip-bg;
+      background-color: transparent;
       content: '';
       pointer-events: auto;
+      .roundedArrow(@tooltip-arrow-width, 5px);
     }
   }
 
   &-placement-top &-arrow,
   &-placement-topLeft &-arrow,
   &-placement-topRight &-arrow {
-    bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
+    bottom: 0;
+    transform: translateY(100%);
 
     &-content {
       box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
@@ -103,7 +118,7 @@
 
   &-placement-top &-arrow {
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateY(100%) translateX(-50%);
   }
 
   &-placement-topLeft &-arrow {
@@ -117,17 +132,18 @@
   &-placement-right &-arrow,
   &-placement-rightTop &-arrow,
   &-placement-rightBottom &-arrow {
-    left: @tooltip-distance - @tooltip-arrow-rotate-width;
+    left: 0;
+    transform: translateX(-100%);
 
     &-content {
       box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
-      transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
+      transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(135deg);
     }
   }
 
   &-placement-right &-arrow {
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateX(-100%) translateY(-50%);
   }
 
   &-placement-rightTop &-arrow {
@@ -141,17 +157,18 @@
   &-placement-left &-arrow,
   &-placement-leftTop &-arrow,
   &-placement-leftBottom &-arrow {
-    right: @tooltip-distance - @tooltip-arrow-rotate-width;
+    right: 0;
+    transform: translateX(100%);
 
     &-content {
       box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
-      transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
+      transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(315deg);
     }
   }
 
   &-placement-left &-arrow {
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateX(100%) translateY(-50%);
   }
 
   &-placement-leftTop &-arrow {
@@ -165,17 +182,18 @@
   &-placement-bottom &-arrow,
   &-placement-bottomLeft &-arrow,
   &-placement-bottomRight &-arrow {
-    top: @tooltip-distance - @tooltip-arrow-rotate-width;
+    top: 0;
+    transform: translateY(-100%);
 
     &-content {
       box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
-      transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
+      transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(225deg);
     }
   }
 
   &-placement-bottom &-arrow {
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateY(-100%) translateX(-50%);
   }
 
   &-placement-bottomLeft &-arrow {
@@ -196,8 +214,8 @@
       background-color: @@lightColor;
     }
     .@{tooltip-prefix-cls}-arrow {
-      &-content {
-        background-color: @@lightColor;
+      &-content::before {
+        background: @@lightColor;
       }
     }
   }