fix: [XSOS-6398] fix tooltips center error

Signed-off-by: csonchen <cson_chensheng@163.com>
xsky-fe · Aug 22, 2023 · dfebfff · dfebfff
1 parent f95370c
commit dfebfff
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
@@ -16,6 +16,7 @@ const Tooltip: React.FC<TooltipProps> = props => {
     contrast,
     className,
     style,
+    arrowAlign,
     children,
     placement: defaultPlacement,
     ...extra
@@ -75,7 +76,7 @@ const Tooltip: React.FC<TooltipProps> = props => {
         <BaseTooltip
           id="tooltip"
           style={Object.assign({}, { maxWidth: 280 }, style)}
-          className={`${cn({ contrast })} ${className}`}
+          className={`${cn({ contrast, 'tooltip-center': arrowAlign === 'center' })} ${className}`}
           onMouseEnter={handleShow}
           onMouseLeave={handleHide}
         >
@@ -120,12 +121,17 @@ Tooltip.propTypes = {
    * 样式
    */
   style: PropTypes.object,
+  /**
+   * 箭头对齐方式
+   */
+  arrowAlign: PropTypes.oneOf(['center', 'auto']),
 };
 
 Tooltip.defaultProps = {
   icon: 'tip-line',
   iconAlign: 'text-bottom',
   contrast: false,
+  arrowAlign: 'center',
 };
 
 export default Tooltip;
diff --git a/src/components/Tooltip/style.scss b/src/components/Tooltip/style.scss
@@ -8,11 +8,13 @@
   }
 }
 .tooltip {
-  &.bs-tooltip-top,
-  &.bs-tooltip-bottom {
-    .tooltip-arrow {
-      left: 50%!important;
-      transform: translate(-50%, 0)!important;
+  &.tooltip-center {
+    &.bs-tooltip-top,
+    &.bs-tooltip-bottom {
+      .tooltip-arrow {
+        left: 50%!important;
+        transform: translate(-50%, 0)!important;
+      }
     }
   }
   .tooltip-inner {

diff --git a/src/interface.tsx b/src/interface.tsx
@@ -77,6 +77,8 @@ export interface IconProps {
 }
 
 export interface TooltipProps {
+  /**箭头对齐方式*/
+  arrowAlign?: 'center' | 'auto';
   /**给图标传入的其他 class； */
   iconClass?: string;
   /**icon的type,用于图标提示 */