Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +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 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"
@ -312,8 +311,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
event.stopPropagation();
router.push("/documents/" + document.id);
}}
disabled={document.status === "COMPLETED"}
/>
)}
<IconButton
icon={ArrowDownTrayIcon}
className="mr-2"

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

@ -1,4 +1,5 @@
import React, { useState } from "react";
import { classNames } from "@documenso/lib";
export function Tooltip(props: any) {
let timeout: NodeJS.Timeout;
@ -16,19 +17,18 @@ export function Tooltip(props: any) {
};
return (
<div
className="relative"
onPointerEnter={showTip}
onPointerLeave={hideTip}
>
<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">
<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>
);
};