Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 16:23:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

Adds animation to tooltip

Browse Source
This commit is contained in:
Piyush Maurya
2023-05-11 21:00:05 +05:30
parent 4f47bbb552
commit 826704c21f
2 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/pages/documents.tsx
View File

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

18
packages/ui/components/tooltip/Tooltip.tsx
View File

@ -1,4 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { classNames } from "@documenso/lib";
export function Tooltip(props: any) { export function Tooltip(props: any) {
let timeout: NodeJS.Timeout; let timeout: NodeJS.Timeout;
@ -16,19 +17,18 @@ export function Tooltip(props: any) {
}; };
return ( return (
<div <div className="relative" onPointerEnter={showTip} onPointerLeave={hideTip}>
className="relative"
onPointerEnter={showTip}
onPointerLeave={hideTip}
>
{props.children} {props.children}
{active && ( <div
<div className="absolute left-1/4 -translate-x-1/2 bottom-9 transform px-4"> className={classNames(
<span className="text-xs inline-block py-1 px-2 rounded text-neon-800 bg-neon-200"> "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} {props.label}
</span> </span>
</div> </div>
)}
</div> </div>
); );
}; };