@kdcloudjs/kdesign 1.7.70 → 1.8.0

package/lib/popper/style/index.css

@@ -0,0 +1,355 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* 多行显示省略号 */
+/* 单行显示省略号 */
+/** 浮层箭头样式 **/
+.kd-popper {
+  opacity: 1;
+  z-index: var(--kd-g-z-index-popper, 1050);
+  visibility: visible;
+}
+.kd-popper.hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.kd-popper .arrow {
+  visibility: hidden;
+}
+.kd-popper .arrow::before {
+  visibility: visible;
+  position: absolute;
+  border-style: solid;
+  border-color: transparent;
+  border-width: var(--arrowSize);
+  content: '';
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.kd-popper[data-popper-placement^='top'] .arrow {
+  bottom: calc(0.9 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='top'] .arrow::before {
+  left: calc(-1 * var(--arrowSize));
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+.kd-popper[data-popper-placement^='bottom'] .arrow {
+  top: calc(-0.9 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='bottom'] .arrow::before {
+  left: calc(-1 * var(--arrowSize));
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+.kd-popper[data-popper-placement^='left'] .arrow {
+  right: calc(0.9 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='left'] .arrow::before {
+  top: calc(-1 * var(--arrowSize));
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+.kd-popper[data-popper-placement^='right'] .arrow {
+  left: calc(-0.9 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='right'] .arrow::before {
+  top: calc(-1 * var(--arrowSize));
+  border-top-color: transparent;
+  border-right-color: transparent;
+}
+.kd-popper-top {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-top-in {
+  -webkit-animation-name: kdZoomBottomIn;
+          animation-name: kdZoomBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-top-out {
+  -webkit-animation-name: kdZoomBottomOut;
+          animation-name: kdZoomBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-left {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-left-in {
+  -webkit-animation-name: kdZoomRightIn;
+          animation-name: kdZoomRightIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-left-out {
+  -webkit-animation-name: kdZoomRightOut;
+          animation-name: kdZoomRightOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-right {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-right-in {
+  -webkit-animation-name: kdZoomLeftIn;
+          animation-name: kdZoomLeftIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-right-out {
+  -webkit-animation-name: kdZoomLeftOut;
+          animation-name: kdZoomLeftOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-bottom {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-bottom-in {
+  -webkit-animation-name: kdZoomTopIn;
+          animation-name: kdZoomTopIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-bottom-out {
+  -webkit-animation-name: kdZoomTopOut;
+          animation-name: kdZoomTopOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-top-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-top-start-in {
+  -webkit-animation-name: kdZoomLeftBottomIn;
+          animation-name: kdZoomLeftBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-top-start-out {
+  -webkit-animation-name: kdZoomLeftBottomOut;
+          animation-name: kdZoomLeftBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-right-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-right-end-in {
+  -webkit-animation-name: kdZoomLeftBottomIn;
+          animation-name: kdZoomLeftBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-right-end-out {
+  -webkit-animation-name: kdZoomLeftBottomOut;
+          animation-name: kdZoomLeftBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-top-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-top-end-in {
+  -webkit-animation-name: kdZoomRightBottomIn;
+          animation-name: kdZoomRightBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-top-end-out {
+  -webkit-animation-name: kdZoomRightBottomOut;
+          animation-name: kdZoomRightBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-left-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-left-end-in {
+  -webkit-animation-name: kdZoomRightBottomIn;
+          animation-name: kdZoomRightBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-left-end-out {
+  -webkit-animation-name: kdZoomRightBottomOut;
+          animation-name: kdZoomRightBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-left-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-left-start-in {
+  -webkit-animation-name: kdZoomTopRightIn;
+          animation-name: kdZoomTopRightIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-left-start-out {
+  -webkit-animation-name: kdZoomTopRightOut;
+          animation-name: kdZoomTopRightOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-bottom-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-bottom-end-in {
+  -webkit-animation-name: kdZoomTopRightIn;
+          animation-name: kdZoomTopRightIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-bottom-end-out {
+  -webkit-animation-name: kdZoomTopRightOut;
+          animation-name: kdZoomTopRightOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-right-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-right-start-in {
+  -webkit-animation-name: kdZoomTopLeftIn;
+          animation-name: kdZoomTopLeftIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-right-start-out {
+  -webkit-animation-name: kdZoomTopLeftOut;
+          animation-name: kdZoomTopLeftOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-bottom-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-bottom-start-in {
+  -webkit-animation-name: kdZoomTopLeftIn;
+          animation-name: kdZoomTopLeftIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-bottom-start-out {
+  -webkit-animation-name: kdZoomTopLeftOut;
+          animation-name: kdZoomTopLeftOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}

package/lib/popper/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/popper/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/popper/style/index.less

@@ -0,0 +1,101 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@popper-prefix-cls: ~'@{kd-prefix}-popper';
+
+.@{popper-prefix-cls} {
+  opacity: 1;
+  z-index: @z-index-popper;
+  visibility: visible;
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .arrow {
+    visibility: hidden;
+
+    &::before {
+      visibility: visible;
+      position: absolute;
+      border-style: solid;
+      border-color: transparent;
+      border-width: var(--arrowSize);
+      content: '';
+      transform: rotate(45deg);
+    }
+  }
+
+  &[data-popper-placement^='top'] .arrow {
+    bottom: calc(0.9 * var(--arrowSize));
+
+    &::before {
+      left: calc(-1 * var(--arrowSize));
+      border-top-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+
+  &[data-popper-placement^='bottom'] .arrow {
+    top: calc(-0.9 * var(--arrowSize));
+
+    &::before {
+      left: calc(-1 * var(--arrowSize));
+      border-bottom-color: transparent;
+      border-right-color: transparent;
+    }
+  }
+
+  &[data-popper-placement^='left'] .arrow {
+    right: calc(0.9 * var(--arrowSize));
+
+    &::before {
+      top: calc(-1 * var(--arrowSize));
+      border-left-color: transparent;
+      border-bottom-color: transparent;
+    }
+  }
+
+  &[data-popper-placement^='right'] .arrow {
+    left: calc(-0.9 * var(--arrowSize));
+
+    &::before {
+      top: calc(-1 * var(--arrowSize));
+      border-top-color: transparent;
+      border-right-color: transparent;
+    }
+  }
+}
+
+.popper-motion(@className, @keyframeName, @duration: calc(@transition-duration - 0.1s)) {
+  .@{className} {
+    animation-duration: @duration;
+
+    &-in {
+      animation-name: ~'@{keyframeName}In';
+      animation-timing-function: @ease-out;
+    }
+
+    &-out {
+      animation-name: ~'@{keyframeName}Out';
+      animation-timing-function: @ease-in;
+    }
+  }
+}
+
+.popper-motion(~'@{popper-prefix-cls}-top', kdZoomBottom);
+.popper-motion(~'@{popper-prefix-cls}-left', kdZoomRight);
+.popper-motion(~'@{popper-prefix-cls}-right', kdZoomLeft);
+.popper-motion(~'@{popper-prefix-cls}-bottom', kdZoomTop);
+.popper-motion(~'@{popper-prefix-cls}-top-start', kdZoomLeftBottom);
+.popper-motion(~'@{popper-prefix-cls}-right-end', kdZoomLeftBottom);
+.popper-motion(~'@{popper-prefix-cls}-top-end', kdZoomRightBottom);
+.popper-motion(~'@{popper-prefix-cls}-left-end', kdZoomRightBottom);
+.popper-motion(~'@{popper-prefix-cls}-left-start', kdZoomTopRight);
+.popper-motion(~'@{popper-prefix-cls}-bottom-end', kdZoomTopRight);
+.popper-motion(~'@{popper-prefix-cls}-right-start', kdZoomTopLeft);
+.popper-motion(~'@{popper-prefix-cls}-bottom-start', kdZoomTopLeft);
+
+

package/lib/style/components.less

@@ -34,6 +34,7 @@
 @import "../notification/style/index.less";
 @import "../pagination/style/index.less";
 @import "../popconfirm/style/index.less";
+@import "../popper/style/index.less";
 @import "../progress/style/index.less";
 @import "../qr-code/style/index.less";
 @import "../radio/style/index.less";

package/lib/tooltip/style/index.css

@@ -122,70 +122,9 @@
   font-size: var(--kd-c-tooltip-color-text, var(--kd-g-font-size-small, 12px));
   line-height: 1.5;
   background-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
-  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-  opacity: 1;
-  z-index: var(--kd-g-z-index-popper, 1050);
-  visibility: visible;
+  -webkit-filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
+          filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
 }
-.kd-tooltip.hidden {
-  opacity: 0;
-  visibility: hidden;
-}
-.kd-tooltip.arrow::before {
-  position: absolute;
-  z-index: -2;
-  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
-  border-style: solid;
-  border-width: var(--arrowSize);
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  content: '';
-}
-.kd-tooltip.arrow::after {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: '';
-  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
-  border-radius: var(--kd-g-radius-border, 2px);
-}
-.kd-tooltip.arrow.bottomLeft::before,
-.kd-tooltip.arrow.bottom::before,
-.kd-tooltip.arrow.bottomRight::before {
-  left: var(--arrowLeft);
-  top: var(--arrowSpill);
-  -webkit-box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
-          box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
-}
-.kd-tooltip.arrow.topLeft::before,
-.kd-tooltip.arrow.top::before,
-.kd-tooltip.arrow.topRight::before {
-  left: var(--arrowLeft);
-  bottom: var(--arrowSpill);
-  -webkit-box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
-          box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent;
-}
-.kd-tooltip.arrow.leftTop::before,
-.kd-tooltip.arrow.left::before,
-.kd-tooltip.arrow.leftBottom::before {
-  top: var(--arrowTop);
-  right: var(--arrowSpill);
-  -webkit-box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
-          box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
-  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
-}
-.kd-tooltip.arrow.rightTop::before,
-.kd-tooltip.arrow.right::before,
-.kd-tooltip.arrow.rightBottom::before {
-  top: var(--arrowTop);
-  left: var(--arrowSpill);
-  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+.kd-tooltip .arrow::before {
+  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
 }

package/lib/tooltip/style/index.less

@@ -13,16 +13,9 @@
   font-size: @tooltip-font-size;
   line-height: 1.5;
   background-color: @tooltip-background-color;
-  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-  opacity: 1;
-  z-index: @z-index-popper;
-  visibility: visible;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
 
-  &.hidden {
-    opacity: 0;
-    visibility: hidden;
+  .arrow::before {
+    border-color: @tooltip-background-color;
   }
-
-  // 箭头样式
-  .popperArrow(@tooltip-background-color, @tooltip-horizontal-gap, @tooltip-box-shadow-blur);
 }

package/lib/tooltip/tooltip.d.ts

@@ -1,9 +1,5 @@
 import React from 'react';
-import { PopperProps } from '../_utils/usePopper';
-export declare type RenderFunction = () => React.ReactNode;
-export interface TooltipProps extends PopperProps {
-    children?: React.ReactNode;
-    tip?: React.ReactNode | RenderFunction;
-}
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<unknown>>;
+import { PopperProps } from '../popper';
+export declare type TooltipProps = PopperProps;
+declare const Tooltip: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<unknown>>;
 export default Tooltip;

package/lib/tooltip/tooltip.js

@@ -1,48 +1,27 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _utils = require("../_utils");
-var _reactNode = require("../_utils/reactNode");
 var _configProvider = require("../config-provider");
-var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _popper = _interopRequireDefault(require("../popper"));
 var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
-  // 属性需要合并一遍用户定义的默认属性
-  var allProps = (0, _utils.getCompProps)('ToolTip', userDefaultProps, props);
-  var status = (0, _react.useRef)();
-  var tip = allProps.tip,
-    children = allProps.children,
-    customPrefixcls = allProps.prefixCls;
-  // className前缀
-  var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', customPrefixcls);
-  var tiplocator = /*#__PURE__*/_react.default.cloneElement( /*#__PURE__*/_react.default.isValidElement(children) && !(0, _reactNode.isFragment)(children) ? children : /*#__PURE__*/_react.default.createElement("span", null, children), {
-    ref: /*#__PURE__*/_react.default.isValidElement(children) && !(0, _reactNode.isFragment)(children) && children.ref ? children.ref : ref
-  });
-  var onVisibleChange = function onVisibleChange(v) {
-    if (status.current === v && allProps.visible === undefined) return;
-    status.current = v;
-    props.onVisibleChange && props.onVisibleChange(v);
-  };
-  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, allProps), {
-    prefixCls: prefixCls,
-    onVisibleChange: onVisibleChange
-  });
-  var tipPopper = typeof tip === 'function' ? tip() : tip;
-  return (0, _usePopper.default)(tiplocator, tipPopper, popperProps);
+    compDefaultProps = _React$useContext.compDefaultProps;
+  var allProps = (0, _utils.getCompProps)('ToolTip', compDefaultProps, props);
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', allProps === null || allProps === void 0 ? void 0 : allProps.prefixCls);
+  var popperProps = (0, _extends2.default)({
+    ref: ref,
+    prefixCls: prefixCls
+  }, allProps);
+  return /*#__PURE__*/_react.default.createElement(_popper.default, (0, _extends2.default)({}, popperProps));
 });
 Tooltip.displayName = 'Tooltip';
 var _default = Tooltip;