diff --git a/src/components/floating/floating.svelte b/src/components/floating/floating.svelte index 4a878e764..eba3e01f4 100644 --- a/src/components/floating/floating.svelte +++ b/src/components/floating/floating.svelte @@ -60,6 +60,10 @@ return result } + function hasInvalidArrowPosition({ x, y }: { x?: number; y?: number }) { + return (!x && !y) || x <= 1 || y <= 1 + } + function updatePosition(...args: any[]) { if (!floating || !target) return @@ -67,6 +71,8 @@ placement: placement, middleware: getMiddlewares(flip, shift, offset, middleware) }).then(({ x, y, placement, middlewareData }) => { + if (hasInvalidArrowPosition(middlewareData.arrow)) return + if (floating) { Object.assign(floating.style, { left: `${x}px`, diff --git a/src/components/tooltip/tooltip.svelte b/src/components/tooltip/tooltip.svelte index 006b706f6..b11e24ba1 100644 --- a/src/components/tooltip/tooltip.svelte +++ b/src/components/tooltip/tooltip.svelte @@ -18,9 +18,17 @@ export let offset: number = 8 export let mode: Mode = 'mini' + /** The length of time the tooltip is open in ms after mouse leave of + * the trigger or tooltip */ + export let mouseleaveTimeout: number = 150 + /* Whether the tooltip is currently visible */ export let visible: boolean | undefined = undefined + /** The length of time in ms the tooltip element takes to fade + * after the users mouse leaves the trigger or tooltip*/ + export let fadeDuration: number = 0 + // Note: This is separate from the |visible| flag because we want to handle // controlled and uncontrolled states for this component. $: visibleInternal = visible ?? false @@ -70,7 +78,7 @@ if (!triggerHovered && !tooltipHovered) { setVisible(false) } - }, 150) + }, mouseleaveTimeout) } })() @@ -116,8 +124,8 @@ class:hero={mode === 'hero'} class:info={mode === 'info'} class:mini={mode === 'mini'} + transition:fade={{ duration: fadeDuration }} class:default={mode === 'default' || !mode} - transition:fade={{ duration: 60 }} hidden={!visibleInternal} bind:this={tooltip} >