diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.ts b/packages/d3-state-visualizer/src/charts/tree/tree.ts
index 3522702c..f3c38143 100644
--- a/packages/d3-state-visualizer/src/charts/tree/tree.ts
+++ b/packages/d3-state-visualizer/src/charts/tree/tree.ts
@@ -186,8 +186,8 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     .call(zoom.scaleTo, initialZoom)
     .call(
-      zoom.on('zoom', () => {
-        const { transform } = d3.event as D3ZoomEvent<SVGSVGElement, unknown>;
+      zoom.on('zoom', (event) => {
+        const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
         vis.attr('transform', transform.toString());
       })
     )
@@ -369,8 +369,8 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
         .append('circle')
         .attr('class', 'nodeCircle')
         .attr('r', 0)
-        .on('click', (clickedNode) => {
-          if (d3.event.defaultPrevented) return;
+        .on('click', (event, clickedNode) => {
+          if ((event as Event).defaultPrevented) return;
           toggleChildren(clickedNode.data);
           update();
         });
@@ -383,7 +383,9 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
         .attr('dy', '.35em')
         .style('fill-opacity', 0)
         .text((d) => d.data.name)
-        .on('click', onClickText);
+        .on('click', (_, datum) => {
+          onClickText(datum);
+        });
 
       const nodeEnterAndUpdate = nodeEnter.merge(node);
 
diff --git a/packages/d3tooltip/src/index.ts b/packages/d3tooltip/src/index.ts
index 7caccdc9..7d295b60 100644
--- a/packages/d3tooltip/src/index.ts
+++ b/packages/d3tooltip/src/index.ts
@@ -1,11 +1,11 @@
 import * as d3 from 'd3';
-import type { BaseType, ContainerElement, Selection } from 'd3';
+import type { BaseType, Selection } from 'd3';
 
 export type StyleValue = string | number | boolean;
 
 interface Options<
   Datum,
-  RootGElement extends ContainerElement,
+  RootGElement extends BaseType,
   RootDatum,
   RootPElement extends BaseType,
   RootPDatum
@@ -23,13 +23,7 @@ interface Options<
   text: string | ((datum: Datum) => string);
 }
 
-const defaultOptions: Options<
-  unknown,
-  ContainerElement,
-  unknown,
-  BaseType,
-  unknown
-> = {
+const defaultOptions: Options<unknown, BaseType, unknown, BaseType, unknown> = {
   left: undefined, // mouseX
   top: undefined, // mouseY
   offset: { left: 0, top: 0 },
@@ -43,7 +37,7 @@ export function tooltip<
   Datum,
   PElement extends BaseType,
   PDatum,
-  RootGElement extends ContainerElement,
+  RootGElement extends BaseType,
   RootDatum,
   RootPElement extends BaseType,
   RootPDatum
@@ -68,9 +62,12 @@ export function tooltip<
   const rootNode = anchor.node()!;
 
   return function tip(selection: Selection<GElement, Datum, PElement, PDatum>) {
-    selection.on('mouseover.tip', (node) => {
-      const [mouseX, mouseY] = d3.mouse(rootNode);
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
+    selection.on('mouseover.tip', (event, datum) => {
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
+      const [x, y] = [
+        left || pointerX + offset.left,
+        top || pointerY - offset.top,
+      ];
 
       anchor.selectAll(`div.${className}`).remove();
 
@@ -81,20 +78,23 @@ export function tooltip<
         .style('z-index', 1001)
         .style('left', `${x}px`)
         .style('top', `${y}px`)
-        .html(typeof text === 'function' ? () => text(node) : () => text);
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
 
       for (const [key, value] of Object.entries(styles)) {
         el.style(key, value);
       }
     });
 
-    selection.on('mousemove.tip', (node) => {
-      const [mouseX, mouseY] = d3.mouse(rootNode);
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
+    selection.on('mousemove.tip', (event, datum) => {
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
+      const [x, y] = [
+        left || pointerX + offset.left,
+        top || pointerY - offset.top,
+      ];
 
       el.style('left', `${x}px`)
         .style('top', `${y}px`)
-        .html(typeof text === 'function' ? () => text(node) : () => text);
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
     });
 
     selection.on('mouseout.tip', () => el.remove());