[Tooltip]: Validates arrow positioning / adds timeout props (#464)

src/components/floating/floating.svelte

@@ -60,13 +60,22 @@
     return result
   }
 
+  // We need this check because the middleware sometimes generates an
+  // x or y value of undefined, 1, or less. This causes the arrow on
+  // the floating element to be positioned in the corner incorrectly.
+  function hasInvalidArrowPosition({ x, y }: { x?: number; y?: number }) {
+    return (!x && !y) || x <= 1 || y <= 1
+  }
+
   function updatePosition(...args: any[]) {
     if (!floating || !target) return
 
     computePosition(target, floating, {
       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`,

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}
       >