diff --git a/packages/d3tooltip/README.md b/packages/d3tooltip/README.md
index 7a22d1c5..9671dada 100644
--- a/packages/d3tooltip/README.md
+++ b/packages/d3tooltip/README.md
@@ -10,45 +10,45 @@ It was created by [@romseguy](https://github.com/romseguy) and merged from [`rom
 ## Quick usage
 
 ```javascript
-import d3 from 'd3';
+import * as d3 from 'd3';
 import { tooltip } from 'd3tooltip';
 
 const DOMNode = document.getElementById('chart');
 const root = d3.select(DOMNode);
 const vis = root.append('svg');
 
-let options = {
-  offset: {left: 30, top: 10}
+const options = {
+  offset: { left: 30, top: 10 },
+  styles: { 'min-width': '50px', 'border-radius': '5px' },
 };
 
-vis.selectAll('circle').data(someData).enter()
+vis
+  .selectAll('circle')
+  .data(someData)
+  .enter()
   .append('circle')
   .attr('r', 10)
   .call(
-    d3tooltip(d3, 'tooltipClassName', options)
-      .text((d, i) => toStringOrHtml(d))
-      .attr({ 'class': 'anotherClassName' })
-      .style({ 'min-width': '50px', 'border-radius: 5px' })
+    d3tooltip('tooltipClassName', {
+      ...options,
+      text: (d) => toStringOrHtml(d),
+    })
   )
-  .on({
-    mouseover(d, i) {
-      d3.select(this).style({
-        fill: 'skyblue'
-      });
-    },
-    mouseout(d, i) {
-      d3.select(this).style({
-        fill: 'black'
-      });
-    }
+  .on('mouseover', function () {
+    d3.select(this).style('fill', 'skyblue');
+  })
+  .on('mouseout', function () {
+    d3.select(this).style('fill', 'black');
   });
 ```
 
 ## API
 
-| Option   | Type        | Default             | Description                                                                                                                                                     |
-| -------- | ----------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `root`   | DOM.Element | `body`              | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select)               |
-| `left`   | Number      | `undefined`         | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element                                                        |
-| `top`    | Number      | `undefined`         | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element                                                        |
-| `offset` | Object      | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option |
+| Option   | Type               | Default             | Description                                                                                                                                                      |
+| -------- | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `root`   | DOM.Element        | `body`              | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select).               |
+| `left`   | Number             | `undefined`         | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element.                                                        |
+| `top`    | Number             | `undefined`         | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element.                                                        |
+| `offset` | Object             | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option. |
+| `styles` | Object             | `{}`                | Sets the styles of the tooltip element.                                                                                                                          |
+| `text`   | String or Function | `''`                | Sets the text of the tooltip. Can be a constant `string` or a function that takes the datum and returns a `string`.                                              |
diff --git a/packages/d3tooltip/src/index.ts b/packages/d3tooltip/src/index.ts
index 998407e0..7caccdc9 100644
--- a/packages/d3tooltip/src/index.ts
+++ b/packages/d3tooltip/src/index.ts
@@ -19,8 +19,8 @@ interface Options<
   root:
     | Selection<RootGElement, RootDatum, RootPElement, RootPDatum>
     | undefined;
-  styles?: { [key: string]: StyleValue };
-  text?: string | ((datum: Datum) => string);
+  styles: { [key: string]: StyleValue };
+  text: string | ((datum: Datum) => string);
 }
 
 const defaultOptions: Options<
@@ -34,6 +34,8 @@ const defaultOptions: Options<
   top: undefined, // mouseY
   offset: { left: 0, top: 0 },
   root: undefined,
+  styles: {},
+  text: '',
 };
 
 export function tooltip<
@@ -51,14 +53,7 @@ export function tooltip<
     Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>
   > = {}
 ) {
-  const {
-    left,
-    top,
-    offset,
-    root,
-    styles = {},
-    text = '',
-  } = {
+  const { left, top, offset, root, styles, text } = {
     ...defaultOptions,
     ...options,
   } as Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>;