diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index 8dc9e7f64..9e59cb731 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/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,38 +264,46 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                         </div>
                         {props.document.status !== DocumentStatus.COMPLETED && (
                           <div className="mr-1 flex">
-                            <IconButton
-                              icon={PaperAirplaneIcon}
-                              disabled={
-                                !item.id ||
-                                item.sendStatus !== "SENT" ||
-                                item.signingStatus === "SIGNED" ||
-                                loading
-                              }
-                              color="secondary"
-                              className="my-auto mr-4 h-9"
-                              onClick={() => {
-                                if (confirm("Resend this signing request?")) {
-                                  setLoading(true);
-                                  sendSigningRequests(props.document, [item.id]).finally(() => {
-                                    setLoading(false);
-                                  });
+                            <Tooltip label="Resend">
+                              <IconButton
+                                icon={PaperAirplaneIcon}
+                                disabled={
+                                  !item.id ||
+                                  item.sendStatus !== "SENT" ||
+                                  item.signingStatus === "SIGNED" ||
+                                  loading
                                 }
-                              }}>
-                              Resend
-                            </IconButton>
-                            <IconButton
-                              icon={TrashIcon}
-                              disabled={!item.id || item.sendStatus === "SENT" || loading}
-                              onClick={() => {
-                                const removedItem = { ...fields }[index];
-                                remove(index);
-                                deleteRecipient(item)?.catch((err) => {
-                                  append(removedItem);
-                                });
-                              }}
-                              className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
-                            />
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (confirm("Resend this signing request?")) {
+                                    setLoading(true);
+                                    sendSigningRequests(props.document, [item.id]).finally(() => {
+                                      setLoading(false);
+                                    });
+                                  }
+                                }}
+                                className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400"
+                              />
+                            </Tooltip>
+                            <Tooltip label="Delete">
+                              <IconButton
+                                icon={TrashIcon}
+                                disabled={!item.id || item.sendStatus === "SENT" || loading}
+                                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="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400"
+                              />
+                            </Tooltip>
                           </div>
                         )}
                       </div>
diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx
new file mode 100644
index 000000000..56bb59095
--- /dev/null
+++ b/packages/ui/components/tooltip/Tooltip.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { classNames } from "@documenso/lib";
+
+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}
+      <div
+        className={classNames(
+          "absolute left-1/4 -translate-x-1/2 transform px-4 transition-all delay-50 duration-120",
+          active && "bottom-9 opacity-100",
+          !active && "pointer-events-none bottom-6 opacity-0"
+        )}>
+        <span className="text-neon-800 bg-neon-200 inline-block rounded py-1 px-2 text-xs">
+          {props.label}
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/components/tooltip/index.ts b/packages/ui/components/tooltip/index.ts
new file mode 100644
index 000000000..3d7eea698
--- /dev/null
+++ b/packages/ui/components/tooltip/index.ts
@@ -0,0 +1 @@
+export { Tooltip } from "./Tooltip";
\ No newline at end of file
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 1cb0c6752..a320043be 100644
--- a/packages/ui/index.ts
+++ b/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";