mirror of
https://github.com/documenso/documenso.git
synced 2025-11-14 00:32:43 +10:00
Merge branch 'bugfix/long_filename' of https://github.com/The-Robin-Hood/documenso into bugfix/long_filename
This commit is contained in:
34
packages/ui/components/tooltip/Tooltip.tsx
Normal file
34
packages/ui/components/tooltip/Tooltip.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
1
packages/ui/components/tooltip/index.ts
Normal file
1
packages/ui/components/tooltip/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { Tooltip } from "./Tooltip";
|
||||
Reference in New Issue
Block a user