fix spot tooltips

src/actions/spottooltipable.js

@@ -1,7 +1,7 @@
 import SpotTooltip from '../components/SpotTooltip.svelte';
 import { get } from 'svelte/store';
 
-export function spottooltipable(node, { data, target, left, top }) {
+export function spottooltipable(node, { data, target, top }) {
   let component;
 
   function handleMouseleave(e) {
@@ -12,10 +12,10 @@ export function spottooltipable(node, { data, target, left, top }) {
   function handleMouseenter(e) {
     if (!target) return;
     
-    const elem = get(target);
+    const { left } = node.getBoundingClientRect();
 
     component = new SpotTooltip({
-      target: elem,
+      target,
       props: {
         data,
         x: left, 

src/components/SpotTooltip.svelte

@@ -49,7 +49,7 @@
   .spot-tooltip {
     margin-right: 1rem;
     position: absolute;
-    z-index: 10000;
+    z-index: 1000000000;
   }
 
   .content {

src/components/TimelineSpot.svelte

@@ -15,7 +15,7 @@
 
 <g class="spot"
     transform="translate({$x} 0)"
-    use:spottooltipable={{data: spot, target: drawWrapper, left: $x, top: $panelHeight + 20}}>
+    use:spottooltipable={{data: spot, target: $drawWrapper, top: $panelHeight + 20}}>
   <circle cx="0" cy="0" r="5"></circle>
   <circle class="bait" cx="0" cy="0" r="10"></circle>
 </g>