mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
update tooltip component
This commit is contained in:
parent
b9e05c4b0e
commit
50e29beda4
@ -14,6 +14,7 @@
|
|||||||
"**/*.{js,ts,jsx,tsx}": "eslint --fix"
|
"**/*.{js,ts,jsx,tsx}": "eslint --fix"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@floating-ui/react": "^0.23.1",
|
||||||
"@headlessui/react": "^1.7.14",
|
"@headlessui/react": "^1.7.14",
|
||||||
"@supabase/supabase-js": "^2.21.0",
|
"@supabase/supabase-js": "^2.21.0",
|
||||||
"@tauri-apps/api": "^1.2.0",
|
"@tauri-apps/api": "^1.2.0",
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
lockfileVersion: '6.0'
|
lockfileVersion: '6.0'
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@floating-ui/react':
|
||||||
|
specifier: ^0.23.1
|
||||||
|
version: 0.23.1(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@headlessui/react':
|
'@headlessui/react':
|
||||||
specifier: ^1.7.14
|
specifier: ^1.7.14
|
||||||
version: 1.7.14(react-dom@18.2.0)(react@18.2.0)
|
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 }
|
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
|
||||||
dev: true
|
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):
|
/@headlessui/react@1.7.14(react-dom@18.2.0)(react@18.2.0):
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA== }
|
{ integrity: sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA== }
|
||||||
@ -1385,6 +1426,14 @@ packages:
|
|||||||
{ integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== }
|
{ integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== }
|
||||||
dev: true
|
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:
|
/array-buffer-byte-length@1.0.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A== }
|
{ 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)
|
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/tabbable@6.1.1:
|
||||||
|
resolution:
|
||||||
|
{ integrity: sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg== }
|
||||||
|
dev: false
|
||||||
|
|
||||||
/tailwind-merge@1.12.0:
|
/tailwind-merge@1.12.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g== }
|
{ integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g== }
|
||||||
@ -4038,7 +4092,6 @@ packages:
|
|||||||
/tslib@2.5.0:
|
/tslib@2.5.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== }
|
{ integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== }
|
||||||
dev: true
|
|
||||||
|
|
||||||
/tsutils@3.21.0(typescript@4.9.5):
|
/tsutils@3.21.0(typescript@4.9.5):
|
||||||
resolution:
|
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 (
|
return (
|
||||||
<div className="group relative flex">
|
<>
|
||||||
{children}
|
<div ref={refs.setReference} {...getReferenceProps()}>
|
||||||
<span className="absolute top-10 scale-0 rounded bg-zinc-800 p-2 text-xs text-zinc-100 transition-all group-hover:scale-100">
|
{children}
|
||||||
{message}
|
</div>
|
||||||
</span>
|
{isOpen && (
|
||||||
</div>
|
<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