增加ToolTips组件

baseComponents/ToolTips/index.js

+import styles from './index.less';
+import { useState, useRef, useEffect, } from 'react';
+
+export default function ToolTips({children, className, style, tips, }) {
+  const [visible, toggleVisible] = useState(false);
+  const timer = useRef(null);
+  function showTips(e) {
+    e.stopPropagation();
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+    }
+    toggleVisible(true);
+    timer.current = setTimeout(() => {
+      toggleVisible(false);
+      timer.current = null;
+    }, 1000)
+  }
+  const tipsContainer = useRef();
+  const [top, setTop] = useState('calc(-22px + -0.16rem)');
+  useEffect(() => {
+    if (tipsContainer && tipsContainer.current) {
+      const { height } = tipsContainer.current.getBoundingClientRect();
+      setTop(`calc(-${height}px + -0.16rem)`);
+    }
+  }, [visible]);
+  return (
+    <div className={styles.container + ' ' +  (className || '')} style={style} onClick={showTips}>
+      {children}
+      {
+        visible && (
+          <div className={styles.tipsContainer} style={{top: top}} ref={tipsContainer}>
+            {tips}
+            <div className={styles.tri}></div>
+          </div>
+        )
+      }
+    </div>
+  )
+}

baseComponents/ToolTips/index.less

+.container {
+  position: relative;
+  display: inline-block;
+}
+.tipsContainer {
+  position: absolute;
+  top: -0.5rem;
+  width: auto;
+  left: 50%;
+  transform: translateX(-50%);
+
+  background-color: rgba(0, 0, 0, 1);
+  color: white;
+  padding: 0.06rem 0.24rem;
+  border-radius: 0.4rem;
+  white-space: nowrap;
+}
+.tri {
+  position: absolute;
+  bottom: -0.12rem;
+  width: 0.24rem;
+  height: 0.24rem;
+  background-color: black;
+  transform-origin: center;
+  left: 50%;
+  transform: rotateZ(45deg) translateX(-50%);
+  z-index: -1;
+}