Adds tooltip to recipient action buttons

apps/web/pages/documents.tsx

@@ -303,6 +303,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                         </td>
                         <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                           <div>
+                            {document.status !== "COMPLETED" && (
                               <IconButton
                                 icon={PencilSquareIcon}
                                 className="mr-2"
@@ -311,8 +312,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                   event.stopPropagation();
                                   router.push("/documents/" + document.id);
                                 }}
-                              disabled={document.status === "COMPLETED"}
                               />
+                            )}
                             <IconButton
                               icon={ArrowDownTrayIcon}
                               className="mr-2"

apps/web/pages/documents/[id]/recipients.tsx

@@ -4,7 +4,7 @@ import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib";
 import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
 import { getDocument } from "@documenso/lib/query";
 import { getUserFromToken } from "@documenso/lib/server";
-import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui";
+import { Breadcrumb, Button, Dialog, IconButton, Tooltip } from "@documenso/ui";
 import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
 import {
@@ -264,6 +264,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                         </div>
                         {props.document.status !== DocumentStatus.COMPLETED && (
                           <div className="mr-1 flex">
+                            <Tooltip label="Resend">
                               <IconButton
                                 icon={PaperAirplaneIcon}
                                 disabled={
@@ -272,9 +273,10 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                   item.signingStatus === "SIGNED" ||
                                   loading
                                 }
-                              color="secondary"
                                 className="my-auto mr-4 h-9"
-                              onClick={() => {
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
                                   if (confirm("Resend this signing request?")) {
                                     setLoading(true);
                                     sendSigningRequests(props.document, [item.id]).finally(() => {
@@ -282,20 +284,26 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                     });
                                   }
                                 }}>
-                              Resend
                               </IconButton>
+                            </Tooltip>
+                            <Tooltip label="Delete">
                               <IconButton
                                 icon={TrashIcon}
                                 disabled={!item.id || item.sendStatus === "SENT" || loading}
-                              onClick={() => {
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (confirm("Delete this signing request?")) {
                                     const removedItem = { ...fields }[index];
                                     remove(index);
                                     deleteRecipient(item)?.catch((err) => {
                                       append(removedItem);
                                     });
+                                  }
                                 }}
                                 className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
                               />
+                            </Tooltip>
                           </div>
                         )}
                       </div>

packages/ui/components/tooltip/Tooltip.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+
+export function Tooltip(props: any) {
+  let timeout: NodeJS.Timeout;
+  const [active, setActive] = useState(false);
+
+  const showTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, props.delay || 40);
+  };
+
+  const hideTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+
+  return (
+    <div
+      className="relative"
+      onPointerEnter={showTip}
+      onPointerLeave={hideTip}
+    >
+      {props.children}
+      {active && (
+        <div className="absolute left-1/4 -translate-x-1/2 bottom-9 transform px-4">
+          <span className="text-xs inline-block py-1 px-2 rounded text-neon-800 bg-neon-200">
+            {props.label}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

packages/ui/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip } from "./Tooltip";

packages/ui/index.ts

@@ -2,3 +2,4 @@ export { Button, IconButton } from "./components/button/index";
 export { SelectBox } from "./components/selectBox/index";
 export { Breadcrumb } from "./components/breadcrumb/index";
 export { Dialog } from "./components/dialog/index";
+export { Tooltip } from "./components/tooltip/index";