mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
update tooltip component
This commit is contained in:
parent
b9e05c4b0e
commit
50e29beda4
@ -14,6 +14,7 @@
|
||||
"**/*.{js,ts,jsx,tsx}": "eslint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.23.1",
|
||||
"@headlessui/react": "^1.7.14",
|
||||
"@supabase/supabase-js": "^2.21.0",
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
|
@ -1,6 +1,9 @@
|
||||
lockfileVersion: '6.0'
|
||||
|
||||
dependencies:
|
||||
'@floating-ui/react':
|
||||
specifier: ^0.23.1
|
||||
version: 0.23.1(react-dom@18.2.0)(react@18.2.0)
|
||||
'@headlessui/react':
|
||||
specifier: ^1.7.14
|
||||
version: 1.7.14(react-dom@18.2.0)(react@18.2.0)
|
||||
@ -570,6 +573,44 @@ packages:
|
||||
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
|
||||
dev: true
|
||||
|
||||
/@floating-ui/core@1.2.6:
|
||||
resolution:
|
||||
{ integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg== }
|
||||
dev: false
|
||||
|
||||
/@floating-ui/dom@1.2.6:
|
||||
resolution:
|
||||
{ integrity: sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw== }
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.2.6
|
||||
dev: false
|
||||
|
||||
/@floating-ui/react-dom@1.3.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution:
|
||||
{ integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g== }
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
dependencies:
|
||||
'@floating-ui/dom': 1.2.6
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@floating-ui/react@0.23.1(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution:
|
||||
{ integrity: sha512-OCc2ViQOBUKOGcE9NLAbpyqB+8Zz92IKIhxgz7XAkynKkVzcVSKtkWOcgyvO4SAzB2OybgRwk3WdzdzDRdh2QQ== }
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 1.3.0(react-dom@18.2.0)(react@18.2.0)
|
||||
aria-hidden: 1.2.3
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
tabbable: 6.1.1
|
||||
dev: false
|
||||
|
||||
/@headlessui/react@1.7.14(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution:
|
||||
{ integrity: sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA== }
|
||||
@ -1385,6 +1426,14 @@ packages:
|
||||
{ integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== }
|
||||
dev: true
|
||||
|
||||
/aria-hidden@1.2.3:
|
||||
resolution:
|
||||
{ integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ== }
|
||||
engines: { node: '>=10' }
|
||||
dependencies:
|
||||
tslib: 2.5.0
|
||||
dev: false
|
||||
|
||||
/array-buffer-byte-length@1.0.0:
|
||||
resolution:
|
||||
{ integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A== }
|
||||
@ -3920,6 +3969,11 @@ packages:
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/tabbable@6.1.1:
|
||||
resolution:
|
||||
{ integrity: sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg== }
|
||||
dev: false
|
||||
|
||||
/tailwind-merge@1.12.0:
|
||||
resolution:
|
||||
{ integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g== }
|
||||
@ -4038,7 +4092,6 @@ packages:
|
||||
/tslib@2.5.0:
|
||||
resolution:
|
||||
{ integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== }
|
||||
dev: true
|
||||
|
||||
/tsutils@3.21.0(typescript@4.9.5):
|
||||
resolution:
|
||||
|
@ -1,10 +1,44 @@
|
||||
export default function Tooltip({ message, children }: { message: string; children: React.ReactNode }) {
|
||||
import { autoUpdate, offset, shift, useFloating, useFocus, useHover, useInteractions } from '@floating-ui/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function Tooltip({ children, message }: { children: React.ReactNode; message: string }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const { x, y, strategy, refs, context } = useFloating({
|
||||
open: isOpen,
|
||||
onOpenChange: setIsOpen,
|
||||
placement: 'top',
|
||||
middleware: [offset(8), shift()],
|
||||
whileElementsMounted(...args) {
|
||||
const cleanup = autoUpdate(...args, { animationFrame: true });
|
||||
return cleanup;
|
||||
},
|
||||
});
|
||||
|
||||
const hover = useHover(context);
|
||||
const focus = useFocus(context);
|
||||
|
||||
const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus]);
|
||||
|
||||
return (
|
||||
<div className="group relative flex">
|
||||
<>
|
||||
<div ref={refs.setReference} {...getReferenceProps()}>
|
||||
{children}
|
||||
<span className="absolute top-10 scale-0 rounded bg-zinc-800 p-2 text-xs text-zinc-100 transition-all group-hover:scale-100">
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
{isOpen && (
|
||||
<div
|
||||
ref={refs.setFloating}
|
||||
className="w-max select-none rounded-md bg-zinc-800 px-4 py-2 text-xs font-medium leading-none text-zinc-100"
|
||||
style={{
|
||||
position: strategy,
|
||||
top: y ?? 0,
|
||||
left: x ?? 0,
|
||||
}}
|
||||
{...getFloatingProps()}
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user