diff --git a/README.md b/README.md
index 68bec20..c727a34 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Turn the attribute "tooltip" into tooltips with this drop in script using custom
 ```
 <div tooltip="Dollars per hour">$9,001</div>
 
-<button tooltip="We won't spam you!">Submit<button>
+<button tooltip="We won't spam you!">Submit</button>
 ```
 
 
@@ -36,6 +36,20 @@ Add the attribute `tooltip="tooltip text content"` to all the elements you want
 <button tooltip="Complete The Pepsi Challenge">Submit<button>
 ```
 
+## Applying custom styles
+In order o apply custom styling, add `data-tooltip-class` to the element you want to show a tooltip.
+Then in corresponding CSS file add rules for `#pep-tooltips.custom-tooltip`
+
+```
+<div tooltip="Dollars per hour" data-tooltip-class="custom-styles-for-tooltip">$9,001</div>
+```
+
+```
+#pep-tooltips.custom-styles-for-tooltip {
+  width: 500px;
+}
+```
+
 
 ## Install Other methods.
 
@@ -43,3 +57,14 @@ Add the attribute `tooltip="tooltip text content"` to all the elements you want
 <link rel="stylesheet" href="dist/styles.css">
 <script src="dist/webpack.bundle.js"></script>
 ```
+
+
+## Running pep-tootips locally
+If you want to work with `pep-tooltips` locally and test out your changes, follow these steps
+1. Go to pep-tooltips folder and run `npm link` command
+2. Go to the app folder that uses `pep-tooltips`, e.g. `pepsico-admin`,
+and run `npm link pep-tooltips` command there
+3. Back in pep-tooltips folder run `make build` command.
+
+You now should be able to see your changes to `pep-tooltips`. Please note, you need to run step #3 and refresh the page of your host app after each change.
+
diff --git a/dist/index.babel.js b/dist/index.babel.js
index bd4816a..f145d94 100644
--- a/dist/index.babel.js
+++ b/dist/index.babel.js
@@ -1,6 +1,39 @@
 (function () {
   'use strict';
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
   var _require = require('wicked-elements'),
       define = _require.define;
 
@@ -28,15 +61,16 @@
     },
 
     onMouseenter: function onMouseenter() {
-      var _el$dataset, _el$dataset2, _el$dataset3;
+      var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4;
 
       var el = this.element;
       var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement
 
-      var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
+      var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
 
-      var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+      var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
 
+      var customClasses = ((_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4.tooltipClass) || null;
       var body = this.element.getAttribute('tooltip'); // Skip if there is no tooltip text
 
       if (body === '' || !body) {
@@ -44,7 +78,14 @@
       } // Replace the content in the element with the text value from the attribute.
 
 
-      this.elmTooltip.innerHTML = body; // Create a popper to manage the element's position.
+      this.elmTooltip.innerHTML = body; // Apply custom class
+
+      if (customClasses) {
+        var _this$elmTooltip$clas;
+
+        (_this$elmTooltip$clas = this.elmTooltip.classList).add.apply(_this$elmTooltip$clas, _toConsumableArray(customClasses.split(' ')));
+      } // Create a popper to manage the element's position.
+
 
       this.popper = createPopper(this.element, this.elmTooltip, {
         placement: placement,
@@ -59,9 +100,20 @@
       this.elmTooltip.style.display = 'inherit';
     },
     onMouseleave: function onMouseleave() {
-      // Reset the tooltip element so it can be re-used.
+      var _el$dataset5;
+
+      var el = this.element;
+      var customClasses = ((_el$dataset5 = el.dataset) === null || _el$dataset5 === void 0 ? void 0 : _el$dataset5.tooltipClass) || null; // Reset the tooltip element so it can be re-used.
+
       this.elmTooltip.innerHTML = '';
-      this.elmTooltip.style.display = 'none'; // remove the popper.
+      this.elmTooltip.style.display = 'none';
+
+      if (customClasses) {
+        var _this$elmTooltip$clas2;
+
+        (_this$elmTooltip$clas2 = this.elmTooltip.classList).remove.apply(_this$elmTooltip$clas2, _toConsumableArray(customClasses.split(' ')));
+      } // remove the popper.
+
 
       this.popper && this.popper.destroy();
     }
diff --git a/dist/webpack.bundle.js b/dist/webpack.bundle.js
index 60b3797..597a1c8 100644
--- a/dist/webpack.bundle.js
+++ b/dist/webpack.bundle.js
@@ -874,7 +874,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var wicked_elements__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! wicked-elements */ \"./node_modules/wicked-elements/esm/index.js\");\n/* harmony import */ var _popperjs_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @popperjs/core */ \"./node_modules/@popperjs/core/lib/index.js\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./styles.css */ \"./src/styles.css\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_styles_css__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\nvar ID_TOOLTIP = '#pep-tooltips';\n/**\n * Upgrades elements with the `tooltip` attribute to enable tooltips.\n * Positions the tooltip wrapper element\n * and replaces the content with the value from the attribute.\n */\n\nObject(wicked_elements__WEBPACK_IMPORTED_MODULE_0__[\"define\"])('[tooltip]', {\n  get elmTooltip() {\n    var elm = document.querySelector(ID_TOOLTIP);\n\n    if (!elm) {\n      throw new Error(\"Could not find the element \".concat(ID_TOOLTIP, \".\\nThis element is required for tooltips.\"));\n    }\n\n    return elm;\n  },\n\n  onMouseenter: function onMouseenter() {\n    var _el$dataset, _el$dataset2, _el$dataset3;\n\n    var el = this.element;\n    var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement\n\n    var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1\n\n    var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1\n\n    var body = this.element.getAttribute('tooltip'); // Skip if there is no tooltip text\n\n    if (body === '' || !body) {\n      return;\n    } // Replace the content in the element with the text value from the attribute.\n\n\n    this.elmTooltip.innerHTML = body; // Create a popper to manage the element's position.\n\n    this.popper = Object(_popperjs_core__WEBPACK_IMPORTED_MODULE_1__[\"createPopper\"])(this.element, this.elmTooltip, {\n      placement: placement,\n      modifiers: [{\n        name: 'offset',\n        options: {\n          offset: [offsetSkidding, offsetDistance]\n        }\n      }]\n    }); // Show the tooltip element.\n\n    this.elmTooltip.style.display = 'inherit';\n  },\n  onMouseleave: function onMouseleave() {\n    // Reset the tooltip element so it can be re-used.\n    this.elmTooltip.innerHTML = '';\n    this.elmTooltip.style.display = 'none'; // remove the popper.\n\n    this.popper && this.popper.destroy();\n  }\n});\n\n//# sourceURL=webpack:///./src/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var wicked_elements__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! wicked-elements */ \"./node_modules/wicked-elements/esm/index.js\");\n/* harmony import */ var _popperjs_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @popperjs/core */ \"./node_modules/@popperjs/core/lib/index.js\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./styles.css */ \"./src/styles.css\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_styles_css__WEBPACK_IMPORTED_MODULE_2__);\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n\n\n\nvar ID_TOOLTIP = '#pep-tooltips';\n/**\n * Upgrades elements with the `tooltip` attribute to enable tooltips.\n * Positions the tooltip wrapper element\n * and replaces the content with the value from the attribute.\n */\n\nObject(wicked_elements__WEBPACK_IMPORTED_MODULE_0__[\"define\"])('[tooltip]', {\n  get elmTooltip() {\n    var elm = document.querySelector(ID_TOOLTIP);\n\n    if (!elm) {\n      throw new Error(\"Could not find the element \".concat(ID_TOOLTIP, \".\\nThis element is required for tooltips.\"));\n    }\n\n    return elm;\n  },\n\n  onMouseenter: function onMouseenter() {\n    var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4;\n\n    var el = this.element;\n    var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement\n\n    var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1\n\n    var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1\n\n    var customClasses = ((_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4.tooltipClass) || null;\n    var body = this.element.getAttribute('tooltip'); // Skip if there is no tooltip text\n\n    if (body === '' || !body) {\n      return;\n    } // Replace the content in the element with the text value from the attribute.\n\n\n    this.elmTooltip.innerHTML = body; // Apply custom class\n\n    if (customClasses) {\n      var _this$elmTooltip$clas;\n\n      (_this$elmTooltip$clas = this.elmTooltip.classList).add.apply(_this$elmTooltip$clas, _toConsumableArray(customClasses.split(' ')));\n    } // Create a popper to manage the element's position.\n\n\n    this.popper = Object(_popperjs_core__WEBPACK_IMPORTED_MODULE_1__[\"createPopper\"])(this.element, this.elmTooltip, {\n      placement: placement,\n      modifiers: [{\n        name: 'offset',\n        options: {\n          offset: [offsetSkidding, offsetDistance]\n        }\n      }]\n    }); // Show the tooltip element.\n\n    this.elmTooltip.style.display = 'inherit';\n  },\n  onMouseleave: function onMouseleave() {\n    var _el$dataset5;\n\n    var el = this.element;\n    var customClasses = ((_el$dataset5 = el.dataset) === null || _el$dataset5 === void 0 ? void 0 : _el$dataset5.tooltipClass) || null; // Reset the tooltip element so it can be re-used.\n\n    this.elmTooltip.innerHTML = '';\n    this.elmTooltip.style.display = 'none';\n\n    if (customClasses) {\n      var _this$elmTooltip$clas2;\n\n      (_this$elmTooltip$clas2 = this.elmTooltip.classList).remove.apply(_this$elmTooltip$clas2, _toConsumableArray(customClasses.split(' ')));\n    } // remove the popper.\n\n\n    this.popper && this.popper.destroy();\n  }\n});\n\n//# sourceURL=webpack:///./src/index.js?");
 
 /***/ }),
 
diff --git a/esm/index.js b/esm/index.js
index a1fdc9d..78d34ce 100644
--- a/esm/index.js
+++ b/esm/index.js
@@ -23,8 +23,9 @@ define('[tooltip]', {
   onMouseenter() {
     const el = this.element;
     const placement = el.dataset?.tooltipPlacement || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement
-    const offsetSkidding = el.dataset?.tooltipOffsetSkidding || 0; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
-    const offsetDistance = el.dataset?.tooltipOffsetDistance || 0; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+    const offsetSkidding = el.dataset?.tooltipOffsetSkidding || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
+    const offsetDistance = el.dataset?.tooltipOffsetDistance || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+    const customClasses = el.dataset?.tooltipClass || null;
     const body = this.element.getAttribute('tooltip');
 
     // Skip if there is no tooltip text
@@ -33,6 +34,10 @@ define('[tooltip]', {
     }
     // Replace the content in the element with the text value from the attribute.
     this.elmTooltip.innerHTML = body;
+    // Apply custom class
+    if(customClasses) {
+      this.elmTooltip.classList.add(...customClasses.split(' ')) 
+    }
 
     // Create a popper to manage the element's position.
     this.popper = createPopper(this.element, this.elmTooltip, {
@@ -51,9 +56,14 @@ define('[tooltip]', {
     this.elmTooltip.style.display = 'inherit';
   },
   onMouseleave() {
+    const el = this.element;
+    const customClasses = el.dataset?.tooltipClass || null;
     // Reset the tooltip element so it can be re-used.
     this.elmTooltip.innerHTML = '';
     this.elmTooltip.style.display = 'none';
+    if(customClasses) {
+      this.elmTooltip.classList.remove(...customClasses.split(' '))
+    }
     // remove the popper.
     this.popper && this.popper.destroy();
   },
diff --git a/package-lock.json b/package-lock.json
index 6745178..55789be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1198,6 +1198,55 @@
         }
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
+      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "@popperjs/core": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
@@ -1488,9 +1537,9 @@
       "dev": true
     },
     "ansi-regex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
       "dev": true
     },
     "ansi-styles": {
@@ -3741,9 +3790,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "mississippi": {
@@ -4090,9 +4139,9 @@
       "dev": true
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
     "pbkdf2": {
@@ -4136,9 +4185,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -5011,21 +5060,38 @@
       "dev": true
     },
     "terser": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.3.4.tgz",
-      "integrity": "sha512-dxuB8KQo8Gt6OVOeLg/rxfcxdNZI/V1G6ze1czFUzPeCFWZRtvZMgSzlZZ5OYBZ4HoG607F6pFPNLekJyV+yVw==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
+      "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.19"
+        "source-map-support": "~0.5.20"
       },
       "dependencies": {
+        "acorn": {
+          "version": "8.8.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+          "dev": true
+        },
         "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.21",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+          "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
         }
       }
     },
@@ -5085,9 +5151,9 @@
           "dev": true
         },
         "terser": {
-          "version": "4.8.0",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-          "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+          "version": "4.8.1",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
+          "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
           "dev": true,
           "requires": {
             "commander": "^2.20.0",
diff --git a/src/index.js b/src/index.js
index ee28a4e..7aab3b7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,8 +22,9 @@ define('[tooltip]', {
   onMouseenter() {
     const el = this.element;
     const placement = el.dataset?.tooltipPlacement || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement
-    const offsetSkidding = el.dataset?.tooltipOffsetSkidding || 0; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
-    const offsetDistance = el.dataset?.tooltipOffsetDistance || 0; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+    const offsetSkidding = el.dataset?.tooltipOffsetSkidding || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
+    const offsetDistance = el.dataset?.tooltipOffsetDistance || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+    const customClasses = el.dataset?.tooltipClass || null;
     const body = this.element.getAttribute('tooltip');
 
     // Skip if there is no tooltip text
@@ -32,6 +33,10 @@ define('[tooltip]', {
     }
     // Replace the content in the element with the text value from the attribute.
     this.elmTooltip.innerHTML = body;
+    // Apply custom class
+    if(customClasses) {
+      this.elmTooltip.classList.add(...customClasses.split(' ')) 
+    }
 
     // Create a popper to manage the element's position.
     this.popper = createPopper(this.element, this.elmTooltip, {
@@ -50,9 +55,14 @@ define('[tooltip]', {
     this.elmTooltip.style.display = 'inherit';
   },
   onMouseleave() {
+    const el = this.element;
+    const customClasses = el.dataset?.tooltipClass || null;
     // Reset the tooltip element so it can be re-used.
     this.elmTooltip.innerHTML = '';
     this.elmTooltip.style.display = 'none';
+    if(customClasses) {
+      this.elmTooltip.classList.remove(...customClasses.split(' '))
+    }
     // remove the popper.
     this.popper && this.popper.destroy();
   },