tooltip增加topLeft

baseComponents/ToolTips/index.js

 import styles from './index.less';
 import { useState, useRef, useEffect, } from 'react';
 
-export default function ToolTips({children, className, style, tips, }) {
+export default function ToolTips({children, className, style, tips, topLeft }) {
   const [visible, toggleVisible] = useState(false);
   const timer = useRef(null);
   function showTips(e) {
@@ -23,14 +23,20 @@ export default function ToolTips({children, className, style, tips, }) {
       setTop(`calc(-${height}px + -0.16rem)`);
     }
   }, [visible]);
+  const tipsContainerClassNames = [styles.tipsContainer];
+  const triangleClassNames = [styles.tri];
+  if (topLeft) {
+    tipsContainerClassNames.push(styles.topLeft);
+    triangleClassNames.push(styles.topLeft);
+  }
   return (
     <div className={styles.container + ' ' +  (className || '')} style={style} onClick={showTips}>
       {children}
       {
         visible && (
-          <div className={styles.tipsContainer} style={{top: top}} ref={tipsContainer}>
+          <div className={tipsContainerClassNames.join(' ')} style={{top: top}} ref={tipsContainer}>
             {tips}
-            <div className={styles.tri}></div>
+            <div className={triangleClassNames.join(' ')}></div>
           </div>
         )
       }

baseComponents/ToolTips/index.less

@@ -14,6 +14,11 @@
   padding: 0.06rem 0.24rem;
   border-radius: 0.4rem;
   white-space: nowrap;
+  &.topLeft {
+    right: 0%;
+    left: auto;
+    transform: translateX(0);
+  }
 }
 .tri {
   position: absolute;
@@ -25,4 +30,9 @@
   left: 50%;
   transform: rotateZ(45deg) translateX(-50%);
   z-index: -1;
+  &.topLeft {
+    left: auto;
+    right: 0.4rem;
+    transform: rotateZ(45deg) translateX(0);
+  }
 }