tooltip has 200ms delay

This commit is contained in:
Kiril Videlov 2023-03-29 17:59:46 +02:00 committed by Kiril Videlov
parent 8547e4c1a7
commit 383c2920f3

View File

@ -11,7 +11,7 @@
const [floatingRef, floatingContent, update] = createFloatingActions({
strategy: 'absolute',
placement: 'bottom',
middleware: [offset(6), flip(), shift(), arrow({ element: arrowRef })],
middleware: [offset(8), flip(), shift(), arrow({ element: arrowRef })],
onComputed({ placement, middlewareData }) {
if (!middlewareData.arrow) return;
const { x, y } = middlewareData.arrow;
@ -32,12 +32,17 @@
});
let showTooltip = false;
const timeoutMilliseconds = 200;
let timeout: ReturnType<typeof setTimeout>;
</script>
<div
class="h-fit w-fit"
on:mouseenter={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)}
on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
on:mouseleave={() => {
clearTimeout(timeout);
showTooltip = false;
}}
use:floatingRef
>
<slot />