icon增加提示

src/editor/Plot/Tools/index.tsx

@@ -1,17 +1,32 @@
+import { Tooltip } from "antd";
+
+type IconWithTipProps = {
+  type: string, 
+  text: string,
+  placement?: "top" | "right",
+};
+
+const IconWithTip = ({ type, text, placement="top" } : IconWithTipProps) => {
+  return (
+    <Tooltip title={text} placement={placement}>
+      <span className={`icon icon-${type}`}></span>
+    </Tooltip>
+  );
+};
 
 const Tools = () => {
   return (
     <>
       <div className="marker-tools">
-        <span className="icon icon-rect"></span>
+        <IconWithTip type="rect" text="矩形工具" />
-        <span className="icon icon-circle"></span>
+        <IconWithTip type="circle" text="圆形工具" />
       </div>
       <div className="common-tools">
         <div className="tools-group">
-          <span className="icon icon-search"></span>
+          <IconWithTip type="search" text="搜索定位" placement="right" />
         </div>
         <div className="tools-group">
-        <span className="icon icon-select"></span>
+          <IconWithTip type="select" text="选择" placement="right" />
         </div>
       </div>
     </>