diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
index 580781964..29a652eb1 100644
--- a/packages/layerchart/src/lib/components/Arc.svelte
+++ b/packages/layerchart/src/lib/components/Arc.svelte
@@ -181,8 +181,8 @@
   transform="translate({xOffset}, {yOffset})"
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />
 
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />
diff --git a/packages/layerchart/src/lib/components/Area.svelte b/packages/layerchart/src/lib/components/Area.svelte
index a02ef5573..0189510f0 100644
--- a/packages/layerchart/src/lib/components/Area.svelte
+++ b/packages/layerchart/src/lib/components/Area.svelte
@@ -72,6 +72,6 @@
   {...$$restProps}
   class={cls('path-area', $$props.class)}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />
diff --git a/packages/layerchart/src/lib/components/Calendar.svelte b/packages/layerchart/src/lib/components/Calendar.svelte
index 81f8c3bdd..fe7487227 100644
--- a/packages/layerchart/src/lib/components/Calendar.svelte
+++ b/packages/layerchart/src/lib/components/Calendar.svelte
@@ -62,8 +62,8 @@
       width={cellWidth}
       height={cellHeight}
       fill={cell.color}
-      on:mousemove={(e) => tooltip?.show(e, cell.data)}
-      on:mouseleave={(e) => tooltip?.hide()}
+      on:pointermove={(e) => tooltip?.show(e, cell.data)}
+      on:pointerleave={(e) => tooltip?.hide()}
       class="stroke-surface-content/5"
       {...$$restProps}
     />
diff --git a/packages/layerchart/src/lib/components/Circle.svelte b/packages/layerchart/src/lib/components/Circle.svelte
index 37a8d4e38..13a108eca 100644
--- a/packages/layerchart/src/lib/components/Circle.svelte
+++ b/packages/layerchart/src/lib/components/Circle.svelte
@@ -35,6 +35,6 @@
   class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />
diff --git a/packages/layerchart/src/lib/components/ClipPath.svelte b/packages/layerchart/src/lib/components/ClipPath.svelte
index 338e6fcda..809eb20ee 100644
--- a/packages/layerchart/src/lib/components/ClipPath.svelte
+++ b/packages/layerchart/src/lib/components/ClipPath.svelte
@@ -25,7 +25,7 @@
   {#if disabled}
     <slot />
   {:else}
-    <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+    <g style:clip-path="url(#{id})" on:click on:pointermove on:pointerleave on:keydown>
       <slot {id} url="url(#{id})" {useId} />
     </g>
   {/if}
diff --git a/packages/layerchart/src/lib/components/GeoCircle.svelte b/packages/layerchart/src/lib/components/GeoCircle.svelte
index 8ab3a8550..17acb5d5c 100644
--- a/packages/layerchart/src/lib/components/GeoCircle.svelte
+++ b/packages/layerchart/src/lib/components/GeoCircle.svelte
@@ -15,4 +15,4 @@
   $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
-<GeoPath {geojson} {...$$restProps} on:mousemove on:mouseleave on:click />
+<GeoPath {geojson} {...$$restProps} on:pointermove on:pointerleave on:click />
diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
index d6dd448eb..58f507773 100644
--- a/packages/layerchart/src/lib/components/GeoPath.svelte
+++ b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -90,10 +90,12 @@
       d={geoPath(geojson)}
       {fill}
       {stroke}
-      on:mousemove={(e) => tooltip?.show(e, geojson)}
-      on:mousemove
-      on:mouseleave={(e) => tooltip?.hide()}
-      on:mouseleave
+      on:pointerenter={(e) => tooltip?.show(e, geojson)}
+      on:pointerenter
+      on:pointermove={(e) => tooltip?.show(e, geojson)}
+      on:pointermove
+      on:pointerleave={(e) => tooltip?.hide()}
+      on:pointerleave
       on:click={(event) => dispatch('click', { geoPath, event })}
       on:click
       class={cls($$props.fill == null && 'fill-transparent', $$props.class)}
diff --git a/packages/layerchart/src/lib/components/Group.svelte b/packages/layerchart/src/lib/components/Group.svelte
index c2ebd05e0..a7ae478ea 100644
--- a/packages/layerchart/src/lib/components/Group.svelte
+++ b/packages/layerchart/src/lib/components/Group.svelte
@@ -40,6 +40,6 @@
   }
 </script>
 
-<g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>
+<g {transform} {...$$restProps} on:click on:pointermove on:pointerleave>
   <slot />
 </g>
diff --git a/packages/layerchart/src/lib/components/Hull.svelte b/packages/layerchart/src/lib/components/Hull.svelte
index 3472b7085..47e18454a 100644
--- a/packages/layerchart/src/lib/components/Hull.svelte
+++ b/packages/layerchart/src/lib/components/Hull.svelte
@@ -25,8 +25,8 @@
 
   const dispatch = createEventDispatcher<{
     click: { points: [number, number][]; polygon: Delaunay.Polygon };
-    mousemove: {
-      event: MouseEvent;
+    pointermove: {
+      event: PointerEvent;
       points: [number, number][];
       polygon: Delaunay.Polygon;
     };
@@ -52,8 +52,8 @@
       geojson={polygon}
       {curve}
       class={cls('fill-transparent', classes.path)}
-      on:mousemove={(e) => dispatch('mousemove', { event: e, points, polygon })}
-      on:mouseleave
+      on:pointermove={(e) => dispatch('pointermove', { event: e, points, polygon })}
+      on:pointerleave
       on:click={(e) => dispatch('click', { points, polygon })}
     />
   {:else}
@@ -65,8 +65,8 @@
       y={(d) => d[1]}
       {curve}
       class={cls('fill-transparent', classes.path)}
-      on:mousemove={(e) => dispatch('mousemove', { event: e, points, polygon })}
-      on:mouseleave
+      on:pointermove={(e) => dispatch('pointermove', { event: e, points, polygon })}
+      on:pointerleave
       on:click={(e) => dispatch('click', { points, polygon })}
     />
   {/if}
diff --git a/packages/layerchart/src/lib/components/Line.svelte b/packages/layerchart/src/lib/components/Line.svelte
index 4b4b85142..67bba06c1 100644
--- a/packages/layerchart/src/lib/components/Line.svelte
+++ b/packages/layerchart/src/lib/components/Line.svelte
@@ -41,6 +41,6 @@
   class={cls($$props.stroke === undefined && 'stroke-surface-content')}
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />
diff --git a/packages/layerchart/src/lib/components/Link.svelte b/packages/layerchart/src/lib/components/Link.svelte
index 61985a925..a4c955479 100644
--- a/packages/layerchart/src/lib/components/Link.svelte
+++ b/packages/layerchart/src/lib/components/Link.svelte
@@ -53,9 +53,9 @@
   d={$tweened_d}
   fill="none"
   on:click
-  on:mouseover
-  on:mousemove
-  on:mouseout
-  on:mouseleave
+  on:pointerover
+  on:pointermove
+  on:pointerout
+  on:pointerleave
   {...$$restProps}
 />
diff --git a/packages/layerchart/src/lib/components/Pie.svelte b/packages/layerchart/src/lib/components/Pie.svelte
index a4e7210a0..3325e6489 100644
--- a/packages/layerchart/src/lib/components/Pie.svelte
+++ b/packages/layerchart/src/lib/components/Pie.svelte
@@ -109,8 +109,8 @@
         {cornerRadius}
         {offset}
         fill={$config.r ? $rGet(arc.data) : null}
-        on:mousemove={(e) => tooltip?.show(e, arc.data)}
-        on:mouseleave={(e) => tooltip?.hide()}
+        on:pointermove={(e) => tooltip?.show(e, arc.data)}
+        on:pointerleave={(e) => tooltip?.hide()}
       />
     {/each}
   </slot>
diff --git a/packages/layerchart/src/lib/components/Rect.svelte b/packages/layerchart/src/lib/components/Rect.svelte
index 8362ed2ae..196ba8ab7 100644
--- a/packages/layerchart/src/lib/components/Rect.svelte
+++ b/packages/layerchart/src/lib/components/Rect.svelte
@@ -46,8 +46,8 @@
   class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
-  on:mouseover
-  on:mousemove
-  on:mouseout
-  on:mouseleave
+  on:pointerover
+  on:pointermove
+  on:pointerout
+  on:pointerleave
 />
diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
index 1986c5206..a8199f8dc 100644
--- a/packages/layerchart/src/lib/components/Spline.svelte
+++ b/packages/layerchart/src/lib/components/Spline.svelte
@@ -129,8 +129,8 @@
     class={cls('path-line fill-none', !$$props.stroke && 'stroke-surface-content', $$props.class)}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
-    on:mousemove
-    on:mouseleave
+    on:pointermove
+    on:pointerleave
     bind:this={pathEl}
   />
 
diff --git a/packages/layerchart/src/lib/components/TooltipContext.svelte b/packages/layerchart/src/lib/components/TooltipContext.svelte
index ef6bbcf92..8d5ef46aa 100644
--- a/packages/layerchart/src/lib/components/TooltipContext.svelte
+++ b/packages/layerchart/src/lib/components/TooltipContext.svelte
@@ -8,8 +8,8 @@
     x: number;
     y: number;
     data: any;
-    show(event: MouseEvent | TouchEvent, tooltipData?: any): any;
-    hide(event?: MouseEvent | TouchEvent);
+    show(e: PointerEvent, tooltipData?: any): void;
+    hide(e?: PointerEvent): void;
   };
 
   export type TooltipContext = Readable<TooltipContextValue>;
@@ -76,7 +76,7 @@
    */
   export let findTooltipData: 'closest' | 'left' | 'right' = 'closest';
 
-  /** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */
+  /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */
   export let raiseTarget = false;
 
   /** quadtree search radius
@@ -140,12 +140,12 @@
     }
   }
 
-  function showTooltip(event: MouseEvent | TouchEvent, tooltipData?: any) {
+  function showTooltip(e: PointerEvent, tooltipData?: any) {
     // Cancel hiding tooltip if from previous event loop
     clearTimeout(hideTimeoutId);
 
-    const referenceNode = (event.target as Element).closest('.layercake-container');
-    const point = localPoint(referenceNode, event);
+    const referenceNode = (e.target as Element).closest('.layercake-container');
+    const point = localPoint(referenceNode, e);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
 
@@ -159,7 +159,7 @@
         }
 
         case 'bisect-band': {
-          // `x` and `y` values at mouse/touch coordinate
+          // `x` and `y` values at pointer coordinate
           const xValueAtPoint = scaleInvert($xScale, localX);
           const yValueAtPoint = scaleInvert($yScale, localY);
 
@@ -184,7 +184,7 @@
         }
 
         case 'bisect-x': {
-          // `x` value at mouse/touch coordinate
+          // `x` value at pointer coordinate
           const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
 
           const index = bisectX($flatData, xValueAtPoint, 1);
@@ -195,7 +195,7 @@
         }
 
         case 'bisect-y': {
-          // `y` value at mouse/touch coordinate
+          // `y` value at pointer coordinate
           const yValueAtPoint = scaleInvert($yScale, localY - $padding.top);
 
           const index = bisectY($flatData, yValueAtPoint, 1);
@@ -209,7 +209,7 @@
 
     if (tooltipData) {
       if (raiseTarget) {
-        raise(event.target);
+        raise(e.target);
       }
 
       $tooltip = {
@@ -313,7 +313,6 @@
         }
       })
       .sort(sortFunc('x'));
-    // console.log({ rects });
   }
 </script>
 
@@ -324,11 +323,13 @@
     <div
       style:width="{$width}px"
       style:height="{$height}px"
-      class={cls('tooltip-trigger absolute', debug && 'bg-danger/10 outline outline-danger')}
-      on:touchstart={showTooltip}
-      on:touchmove={showTooltip}
-      on:mousemove={showTooltip}
-      on:mouseleave={hideTooltip}
+      class={cls(
+        'tooltip-trigger absolute touch-none',
+        debug && 'bg-danger/10 outline outline-danger'
+      )}
+      on:pointerenter={showTooltip}
+      on:pointermove={showTooltip}
+      on:pointerleave={hideTooltip}
       on:click={(e) => {
         onClick({ data: $tooltip?.data });
       }}
@@ -337,8 +338,9 @@
 {:else if mode === 'voronoi'}
   <Svg>
     <Voronoi
-      on:mousemove={(e) => showTooltip(e.detail.event, e.detail.data)}
-      on:mouseleave={hideTooltip}
+      on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
+      on:pointermove={(e) => showTooltip(e.detail.event, e.detail.data)}
+      on:pointerleave={hideTooltip}
       on:click={(e) => {
         onClick({ data: e.detail.data });
       }}
@@ -355,8 +357,9 @@
           width={rect.width}
           height={rect.height}
           class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
-          on:mousemove={(e) => showTooltip(e, rect.data)}
-          on:mouseleave={hideTooltip}
+          on:pointerenter={(e) => showTooltip(e, rect.data)}
+          on:pointermove={(e) => showTooltip(e, rect.data)}
+          on:pointerleave={hideTooltip}
           on:click={(e) => {
             onClick({ data: rect.data });
           }}
diff --git a/packages/layerchart/src/lib/components/Transform.svelte b/packages/layerchart/src/lib/components/Transform.svelte
index 00ef1311e..3674759c1 100644
--- a/packages/layerchart/src/lib/components/Transform.svelte
+++ b/packages/layerchart/src/lib/components/Transform.svelte
@@ -68,28 +68,26 @@
     }
   }
 
-  function onMouseDown(e: MouseEvent & { currentTarget: SVGElement }) {
+  function onPointerDown(e: PointerEvent & { currentTarget: SVGElement }) {
     if (disablePointer) return;
 
     e.preventDefault();
 
     dragging = true;
     moved = false;
-    svgEl = e.currentTarget.ownerSVGElement; // capture for reference in mousemove event
+    svgEl = e.currentTarget.ownerSVGElement; // capture for reference in pointermove event
     startPoint = localPoint(svgEl, e);
     startTranslate = $translate;
 
-    window.addEventListener('mousemove', onMouseMove, { capture: true });
-    window.addEventListener('mouseup', onMouseUp);
-
     dispatch('dragstart');
   }
 
-  function onMouseMove(e: MouseEvent) {
+  function onPointerMove(e: PointerEvent) {
     if (!dragging) return;
 
     e.preventDefault(); // Stop text selection
     e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
+    e.currentTarget.setPointerCapture(e.pointerId);
 
     const endPoint = localPoint(svgEl, e);
     const deltaX = endPoint.x - startPoint.x;
@@ -109,11 +107,8 @@
     }
   }
 
-  function onMouseUp(e: MouseEvent) {
+  function onPointerUp(e: PointerEvent) {
     dragging = false;
-
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
     dispatch('dragend');
   }
 
@@ -188,7 +183,7 @@
     }
   }
 
-  function localPoint(svgEl: SVGSVGElement | null, e: MouseEvent) {
+  function localPoint(svgEl: SVGSVGElement | null, e: PointerEvent) {
     if (svgEl) {
       const screenCTM = svgEl.getScreenCTM();
 
@@ -230,13 +225,22 @@
 
 <g
   on:mousewheel={onWheel}
-  on:mousedown={onMouseDown}
+  on:pointerdown={onPointerDown}
+  on:pointermove={onPointerMove}
+  on:touchmove={(e) => {
+    // Touch events cause pointer events to be interrupted.
+    // Typically `touch-action: none` works, but doesn't appear to with SVG, but `preventDefault()` works here
+    // https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#touch-action_css_property
+    e.preventDefault();
+  }}
+  on:pointerup={onPointerUp}
   on:dblclick={onDoubleClick}
   on:click|capture={onClick}
   on:click
   on:keydown
   on:keyup
   on:keypress
+  class="touch-none"
 >
   <rect
     x={-$padding.left}
diff --git a/packages/layerchart/src/lib/components/Voronoi.svelte b/packages/layerchart/src/lib/components/Voronoi.svelte
index 0c62ef2c4..149400095 100644
--- a/packages/layerchart/src/lib/components/Voronoi.svelte
+++ b/packages/layerchart/src/lib/components/Voronoi.svelte
@@ -22,8 +22,8 @@
 
   const dispatch = createEventDispatcher<{
     click: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects };
-    mousemove: {
-      event: MouseEvent;
+    pointermove: {
+      event: PointerEvent;
       data: any;
       point?: [number, number];
       feature?: GeoPermissibleObjects;
@@ -55,9 +55,13 @@
       <GeoPath
         geojson={feature}
         class={cls('fill-transparent', classes.path)}
-        on:mousemove={(e) =>
-          dispatch('mousemove', { event: e, data: feature.properties.site.data, feature })}
-        on:mouseleave
+        on:pointermove={(e) =>
+          dispatch('pointermove', { event: e, data: feature.properties.site.data, feature })}
+        on:pointerleave
+        on:touchmove={(e) => {
+          // Prevent touch to not interfer with pointer
+          e.preventDefault();
+        }}
         on:click={(e) => dispatch('click', { data: feature.properties.site.data, feature })}
       />
     {/each}
@@ -67,8 +71,12 @@
       <path
         d={voronoi.renderCell(i)}
         class={cls('fill-transparent', classes.path)}
-        on:mousemove={(e) => dispatch('mousemove', { event: e, data: point.data, point })}
-        on:mouseleave
+        on:pointermove={(e) => dispatch('pointermove', { event: e, data: point.data, point })}
+        on:pointerleave
+        on:touchmove={(e) => {
+          // Prevent touch to not interfer with pointer
+          e.preventDefault();
+        }}
         on:click={(e) => dispatch('click', { data: point.data, point })}
       />
     {/each}
diff --git a/packages/layerchart/src/lib/utils/event.ts b/packages/layerchart/src/lib/utils/event.ts
index 53702f143..f02db5e0b 100644
--- a/packages/layerchart/src/lib/utils/event.ts
+++ b/packages/layerchart/src/lib/utils/event.ts
@@ -3,7 +3,7 @@ import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } fro
 // See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
 // TODO: Matches event.layerX/Y, but are deprecated (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/layerX).
 //       Similar and could be replaced by event.offsetX/Y (but not identical)
-export function localPoint(node: Element, event: MouseEvent | TouchEvent) {
+export function localPoint(node: Element, event: MouseEvent | TouchEvent | PointerEvent) {
   if (!node || !event) return null;
 
   const coords = getPointFromEvent(event);
@@ -33,7 +33,7 @@ export function localPoint(node: Element, event: MouseEvent | TouchEvent) {
   };
 }
 
-function getPointFromEvent(event?: MouseEvent | TouchEvent) {
+function getPointFromEvent(event?: MouseEvent | TouchEvent | PointerEvent) {
   if (!event) return { x: 0, y: 0 };
 
   if (isTouchEvent(event)) {
diff --git a/packages/layerchart/src/routes/+layout.svelte b/packages/layerchart/src/routes/+layout.svelte
index d0e65a19a..e17404dd7 100644
--- a/packages/layerchart/src/routes/+layout.svelte
+++ b/packages/layerchart/src/routes/+layout.svelte
@@ -79,7 +79,6 @@
           // Page navigated away
           posthog.capture('$pageleave');
         }
-        console.log('entering');
         // Page entered
         currentPath = $page.url.pathname;
         posthog.capture('$pageview');
diff --git a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
index a2b3c3b65..0c3ec9d04 100644
--- a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
@@ -11,7 +11,7 @@
   const data = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 });
 
   let point = { x: 0, y: 0 };
-  function onMouseMove(e: MouseEvent) {
+  function onPointerMove(e: PointerEvent) {
     point = {
       x: e.offsetX,
       y: e.offsetY,
@@ -20,7 +20,7 @@
 </script>
 
 <Preview {data}>
-  <div class="h-[400px] p-4 border rounded relative" on:mousemove={onMouseMove}>
+  <div class="h-[400px] p-4 border rounded relative" on:pointermove={onPointerMove}>
     <Chart {data} x="x" y="y" let:xScale let:yScale>
       <Svg>
         <ChartClipPath>
diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
index eeda9ac78..0a99472cb 100644
--- a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
@@ -180,8 +180,8 @@
                 padAngle={0.02}
                 fill={color}
                 class="hover:scale-90 origin-center [transform-box:fill-box] transition-transform"
-                on:mousemove={(e) => tooltip?.show(e, color)}
-                on:mouseleave={(e) => tooltip?.hide()}
+                on:pointermove={(e) => tooltip?.show(e, color)}
+                on:pointerleave={(e) => tooltip?.hide()}
               />
             {/each}
           {/each}
diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
index 1fc47ab7b..407dab279 100644
--- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
@@ -55,8 +55,8 @@
               {r}
               fill={genderColor(node.gender)}
               class="stroke-surface-100"
-              on:mousemove={(e) => tooltip.show(e, node)}
-              on:mouseleave={tooltip.hide}
+              on:pointermove={(e) => tooltip.show(e, node)}
+              on:pointerleave={tooltip.hide}
             />
           {/each}
         </ForceSimulation>
diff --git a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
index 996cd477d..4aadc6c61 100644
--- a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
@@ -53,7 +53,7 @@
           <rect
             {width}
             {height}
-            on:mousemove={(e) => {
+            on:pointermove={(e) => {
               nodes[0].fx = e.offsetX - width / 2;
               nodes[0].fy = e.offsetY - height / 2;
             }}
diff --git a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
index 574b369e4..6ddc83892 100644
--- a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
@@ -127,8 +127,8 @@
               center={[eq.longitude, eq.latitude]}
               radius={rScale(Math.exp(eq.magnitude))}
               class="stroke-danger fill-danger/20"
-              on:mousemove={(e) => tooltip?.show(e, eq)}
-              on:mouseleave={(e) => tooltip?.hide()}
+              on:pointermove={(e) => tooltip?.show(e, eq)}
+              on:pointerleave={(e) => tooltip?.hide()}
             />
           {/each}
         </Transform>
diff --git a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
index ea8f0263c..3a9e73ea6 100644
--- a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
@@ -142,8 +142,8 @@
               geojson={feature}
               fill={hasColor ? colorScale(feature.properties.Date) : undefined}
               class={cls('transition-colors', !hasColor && 'fill-surface-content/10')}
-              on:mousemove={(e) => tooltip?.show(e, feature.properties)}
-              on:mouseleave={(e) => tooltip?.hide()}
+              on:pointermove={(e) => tooltip?.show(e, feature.properties)}
+              on:pointerleave={(e) => tooltip?.hide()}
             />
           {/each}
         </Transform>
diff --git a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
index 06ed6aba0..0db6b80c1 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
@@ -54,8 +54,8 @@
                 class={cls(
                   node.children ? 'fill-surface-100 stroke-surface-content' : 'fill-surface-content'
                 )}
-                on:mousemove={(e) => tooltip.show(e, node)}
-                on:mouseleave={tooltip.hide}
+                on:pointermove={(e) => tooltip.show(e, node)}
+                on:pointerleave={tooltip.hide}
               />
             {/each}
           </Group>
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
index ef4640690..4829e07f3 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
@@ -111,8 +111,8 @@
               data={link}
               stroke-width={link.width}
               class="stroke-surface-content/10"
-              on:mousemove={(e) => tooltip.show(e, { link })}
-              on:mouseleave={tooltip.hide}
+              on:pointermove={(e) => tooltip.show(e, { link })}
+              on:pointerleave={tooltip.hide}
             />
           {/each}
 
@@ -124,8 +124,8 @@
                 width={nodeWidth}
                 height={nodeHeight}
                 class="fill-primary"
-                on:mousemove={(e) => tooltip.show(e, { node })}
-                on:mouseleave={tooltip.hide}
+                on:pointermove={(e) => tooltip.show(e, { node })}
+                on:pointerleave={tooltip.hide}
               />
               <Text
                 value={node.name}
@@ -263,9 +263,9 @@
                 'transition[stroke-opacity] duration-300',
                 linkColorBy === 'static' && 'stroke-surface-content'
               )}
-              on:mouseover={() => (highlightLinkIndexes = [link.index])}
-              on:mousemove={(e) => tooltip.show(e, { link })}
-              on:mouseout={() => {
+              on:pointerover={() => (highlightLinkIndexes = [link.index])}
+              on:pointermove={(e) => tooltip.show(e, { link })}
+              on:pointerout={() => {
                 highlightLinkIndexes = [];
                 tooltip.hide();
               }}
@@ -282,14 +282,14 @@
                 height={nodeHeight}
                 fill={colorScale(node[nodeColorBy])}
                 fill-opacity={0.5}
-                on:mouseover={() => {
+                on:pointerover={() => {
                   highlightLinkIndexes = [
                     ...node.sourceLinks.map((l) => l.index),
                     ...node.targetLinks.map((l) => l.index),
                   ];
                 }}
-                on:mousemove={(e) => tooltip.show(e, { node })}
-                on:mouseout={() => {
+                on:pointermove={(e) => tooltip.show(e, { node })}
+                on:pointerout={() => {
                   highlightLinkIndexes = [];
                   tooltip.hide();
                 }}
@@ -382,8 +382,8 @@
                 'transition[stroke-opacity] duration-300',
                 linkColorBy === 'static' && 'stroke-surface-content'
               )}
-              on:mouseover={() => (highlightLinkIndexes = [link.index])}
-              on:mouseout={() => (highlightLinkIndexes = [])}
+              on:pointerover={() => (highlightLinkIndexes = [link.index])}
+              on:pointerout={() => (highlightLinkIndexes = [])}
               tweened
             />
           {/each}
@@ -397,13 +397,13 @@
                 height={nodeHeight}
                 fill={colorScale(node[nodeColorBy])}
                 fill-opacity={0.5}
-                on:mouseover={() => {
+                on:pointerover={() => {
                   highlightLinkIndexes = [
                     ...node.sourceLinks.map((l) => l.index),
                     ...node.targetLinks.map((l) => l.index),
                   ];
                 }}
-                on:mouseout={() => (highlightLinkIndexes = [])}
+                on:pointerout={() => (highlightLinkIndexes = [])}
                 tweened
               />
               <Text
diff --git a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
index 001c703d2..a398a9eff 100644
--- a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
@@ -125,8 +125,8 @@
                 'stroke-2 fill-none transition-colors',
                 !hasColor && 'stroke-surface-content/10'
               )}
-              on:mousemove={(e) => tooltip?.show(e, feature.properties)}
-              on:mouseleave={(e) => tooltip?.hide()}
+              on:pointermove={(e) => tooltip?.show(e, feature.properties)}
+              on:pointerleave={(e) => tooltip?.hide()}
             />
           {/each}
 
@@ -137,8 +137,8 @@
               center={[long, lat]}
               radius={0.5}
               class="fill-surface-content stroke-surface-100 stroke"
-              on:mousemove={(e) => tooltip?.show(e, feature.properties)}
-              on:mouseleave={(e) => tooltip?.hide()}
+              on:pointermove={(e) => tooltip?.show(e, feature.properties)}
+              on:pointerleave={(e) => tooltip?.hide()}
             />
           {/each} -->
 
@@ -149,8 +149,8 @@
                 <circle
                   r={2}
                   class="fill-surface-content stroke-surface-100 stroke"
-                  on:mousemove={(e) => tooltip?.show(e, feature.properties)}
-                  on:mouseleave={(e) => tooltip?.hide()}
+                  on:pointermove={(e) => tooltip?.show(e, feature.properties)}
+                  on:pointerleave={(e) => tooltip?.hide()}
                 />
               </GeoPoint>
             </GeoVisible>
diff --git a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
index eea6a15ee..e252e3542 100644
--- a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
@@ -116,8 +116,8 @@
                   on:click={() => {
                     selected = node;
                   }}
-                  on:mousemove={(e) => tooltip.show(e, node)}
-                  on:mouseleave={tooltip.hide}
+                  on:pointermove={(e) => tooltip.show(e, node)}
+                  on:pointerleave={tooltip.hide}
                 >
                   <!-- <text x={centroid[0]} y={centroid[1]}>{node.data.name}</text> -->
                 </Arc>
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
index 3c2649613..92b2281ae 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
@@ -193,8 +193,8 @@
                   x={xScale(node.x0)}
                   y={yScale(node.y0)}
                   on:click={() => (node.children ? (selectedNested = node) : null)}
-                  on:mousemove={(e) => tooltip.show(e, node)}
-                  on:mouseleave={tooltip.hide}
+                  on:pointermove={(e) => tooltip.show(e, node)}
+                  on:pointerleave={tooltip.hide}
                 >
                   {@const nodeWidth = xScale(node.x1) - xScale(node.x0)}
                   {@const nodeHeight = yScale(node.y1) - yScale(node.y0)}