feat: add tooltips

slotDumpling · Aug 25, 2024 · 461b480 · 461b480
1 parent 97cc651
commit 461b480
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/src/pages/reader/Header/Middle.tsx b/src/pages/reader/Header/Middle.tsx
@@ -1,5 +1,5 @@
-import { FC, ReactNode, useState } from "react";
-import { Button, ButtonProps, Input, Popover, Segmented } from "antd";
+import React, { FC, ReactNode, useState } from "react";
+import { Button, ButtonProps, Input, Popover, Segmented, Tooltip } from "antd";
 import {
   UndoOutlined,
   RedoOutlined,
@@ -17,6 +17,11 @@ import { DrawCtrl } from "draft-pad/dist/lib";
 import { useDrawCtrl, useUpdateDrawCtrl } from "lib/draw/DrawCtrl";
 
 const btnProps: ButtonProps = { type: "text" };
+const addTip = (icon: React.ReactNode, title = ""): React.ReactNode => (
+  <Tooltip placement="bottom" title={title}>
+    {icon}
+  </Tooltip>
+);
 
 export const HeaderMiddle: FC<{
   handleUndo: () => void;
@@ -27,14 +32,14 @@ export const HeaderMiddle: FC<{
   <div className="middle">
     <Button
       {...btnProps}
-      icon={<UndoOutlined />}
+      icon={addTip(<UndoOutlined />, "Undo")}
       onClick={handleUndo}
       disabled={!undoable}
     />
     <Button
       className="redo-btn"
       {...btnProps}
-      icon={<RedoOutlined />}
+      icon={addTip(<RedoOutlined />, "Redo")}
       onClick={handleRedo}
       disabled={!redoable}
     />
@@ -60,15 +65,18 @@ const PenButton = () => {
     >
       <Button
         type="link"
-        icon={<HighlightTwoTone twoToneColor={color} className="pen-icon" />}
+        icon={addTip(
+          <HighlightTwoTone twoToneColor={color} className="pen-icon" />,
+          "Draw"
+        )}
         data-active={mode === "draw"}
       />
     </Popover>
   ) : (
     <Button
       {...btnProps}
       onClick={() => updateDrawCtrl({ mode: "draw" })}
-      icon={<HighlightOutlined />}
+      icon={addTip(<HighlightOutlined />, "Draw")}
     />
   );
 };
@@ -111,15 +119,15 @@ const EraserButton = () => {
     >
       <Button
         type="link"
-        icon={<IconFont type="icon-eraser" />}
+        icon={addTip(<IconFont type="icon-eraser" />, "Eraser")}
         data-active={mode === "erase"}
       />
     </Popover>
   ) : (
     <Button
       {...btnProps}
       onClick={() => updateDrawCtrl({ mode: "erase" })}
-      icon={<IconFont type="icon-eraser" />}
+      icon={addTip(<IconFont type="icon-eraser" />, "Eraser")}
     />
   );
 };
@@ -128,7 +136,10 @@ const SelectButton = () => {
   const { lasso, mode } = useDrawCtrl();
   const updateDrawCtrl = useUpdateDrawCtrl();
 
-  const icon = lasso ? <IconFont type="icon-lasso1" /> : <GatewayOutlined />;
+  const icon = addTip(
+    lasso ? <IconFont type="icon-lasso1" /> : <GatewayOutlined />,
+    "Lasso"
+  );
 
   return mode === "select" ? (
     <Button
@@ -167,9 +178,9 @@ const AddMoreButtons: FC = () => {
   );
 
   const buttons: Record<string, ReactNode> = {
-    text: getButton("text", <IconFont type="icon-text1" />),
-    picture: getButton("picture", <PictureOutlined />),
-    rect: getButton("rect", <BorderOutlined />),
+    text: getButton("text", addTip(<IconFont type="icon-text1" />, "Add text")),
+    picture: getButton("picture", addTip(<PictureOutlined />, "Add image")),
+    rect: getButton("rect", addTip(<BorderOutlined />, "Add rectangle")),
   };
 
   const [showImage, setShowImage] = useState(false);
@@ -230,7 +241,12 @@ const AddMoreButtons: FC = () => {
         placement="bottomRight"
         getPopupContainer={(e) => e.parentElement!}
       >
-        {buttons[mode] ?? <Button type="text" icon={<PlusCircleOutlined />} />}
+        {buttons[mode] ?? (
+          <Button
+            type="text"
+            icon={addTip(<PlusCircleOutlined />, "Add more")}
+          />
+        )}
       </Popover>
     </>
   );

diff --git a/src/pages/reader/tools/PenPanel.tsx b/src/pages/reader/tools/PenPanel.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, FC, useEffect, useMemo, useState } from "react";
 import { defaultWidthList, DrawCtrl } from "draft-pad/dist/lib";
 import { ColorCirle } from "component/ColorCircle";
-import { Popover, Segmented, Slider } from "antd";
+import { Popover, Segmented, Slider, Tooltip } from "antd";
 import { allColors } from "lib/color";
 import { Setter, useEvent } from "lib/hooks";
 import IconFont from "component/IconFont";
@@ -142,9 +142,11 @@ const HighlightSwitch: FC<{
         checked={checked}
         onChange={(e) => updateDrawCtrl({ highlight: e.target.checked })}
       />
-      <div className="hi-switch">
-        <IconFont type="icon-Highlight" />
-      </div>
+      <Tooltip title="Highlighter" placement="bottom">
+        <div className="hi-switch">
+          <IconFont type="icon-Highlight" />
+        </div>
+      </Tooltip>
     </label>
   );
 };