feat: more tooltips

src/common/component/Send/EmojiPicker.js

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Tippy from "@tippyjs/react";
 import styled from "styled-components";
+import Tooltip from "../../component/Tooltip";
 import { useKey } from "rooks";
 const StyledBtn = styled.button`
   outline: none;
@@ -38,18 +39,20 @@ export default function EmojiPicker({ selectEmoji }) {
     selectEmoji(emoji.native);
   };
   return (
-    <Tippy
-      onClickOutside={toggleVisible}
-      visible={visible}
-      offset={[-18, 25]}
-      interactive
-      placement="top-start"
-      // trigger="click"
-      content={<Picker onSelect={handleSelect} />}
-    >
-      <StyledBtn onClick={toggleVisible}>
-        <SmileIcon />
-      </StyledBtn>
-    </Tippy>
+    <Tooltip placement="top" tip="Emojis" disabled={visible}>
+      <Tippy
+        onClickOutside={toggleVisible}
+        visible={visible}
+        offset={[-18, 25]}
+        interactive
+        placement="top-start"
+        // trigger="click"
+        content={<Picker onSelect={handleSelect} />}
+      >
+        <StyledBtn onClick={toggleVisible}>
+          <SmileIcon />
+        </StyledBtn>
+      </Tippy>
+    </Tooltip>
   );
 }

src/common/component/Send/Toolbar.js

@@ -1,5 +1,7 @@
 import { useState, useRef } from "react";
 import styled from "styled-components";
+import Tooltip from "../../component/Tooltip";
+
 import UploadModal from "../../component/UploadModal";
 import AddIcon from "../../../assets/icons/add.solid.svg";
 import MarkdownIcon from "../../../assets/icons/markdown.svg";
@@ -23,7 +25,7 @@ const Styled = styled.div`
     position: relative;
     width: 24px;
     height: 24px;
-    input {
+    label {
       opacity: 0;
       cursor: pointer;
       position: absolute;
@@ -31,6 +33,9 @@ const Styled = styled.div`
       top: 0;
       width: 100%;
       height: 100%;
+      input {
+        display: none;
+      }
     }
   }
 `;
@@ -59,19 +64,26 @@ export default function Toolbar({ toggleMode, mode, to, context }) {
       )}
       <Styled className={mode}>
         <div className="md" onClick={toggleMode}>
-          <MarkdownIcon className={mode} />
-        </div>
-        <div className="add">
-          <AddIcon />
-          <input
-            ref={fileInputRef}
-            multiple={false}
-            onChange={handleUpload}
-            type="file"
-            name="file"
-            id="file"
-          />
+          <Tooltip placement="top" tip="Markdown">
+            <MarkdownIcon className={mode} />
+          </Tooltip>
         </div>
+        <Tooltip placement="top" tip="Upload">
+          <div className="add">
+            <AddIcon />
+            <label htmlFor="file">
+              <input
+                size={24}
+                ref={fileInputRef}
+                multiple={false}
+                onChange={handleUpload}
+                type="file"
+                name="file"
+                id="file"
+              />
+            </label>
+          </div>
+        </Tooltip>
       </Styled>
     </>
   );

src/common/component/Tooltip.js

@@ -37,7 +37,12 @@ const StyledTip = styled.div`
     transform: translate3d(-50%, -50%, 0) rotate(45deg);
   }
 `;
-export default function Tooltip({ tip = "", placement = "right", children }) {
+export default function Tooltip({
+  tip = "",
+  placement = "right",
+  children,
+  ...rest
+}) {
   return (
     <Tippy
       offset={[0, 18]}
@@ -45,6 +50,7 @@ export default function Tooltip({ tip = "", placement = "right", children }) {
       delay={[0, 0]}
       placement={placement}
       content={<StyledTip className={placement}>{tip}</StyledTip>}
+      {...rest}
     >
       {children}
     </Tippy>