From 7f3741eb72c75f0d7c04610e66cc4e7335c49925 Mon Sep 17 00:00:00 2001
From: kebabmaster <ieshevyakov@gmail.com>
Date: Wed, 4 Mar 2020 12:52:28 +0000
Subject: [PATCH 1/7] <style> element generated - issues: performance - have to
 move the init into the tooltip constructor

---
 src/utils/idGenerator.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/utils/idGenerator.js

diff --git a/src/utils/idGenerator.js b/src/utils/idGenerator.js
new file mode 100644
index 000000000..c150d983c
--- /dev/null
+++ b/src/utils/idGenerator.js
@@ -0,0 +1,15 @@
+const idLen = 20;
+const styleId = Math.round((Math.pow(36, idLen + 1) - Math.random() * Math.pow(36, idLen))).toString(36).slice(1); // TODO: gotta make it so there are only letters, no numbers
+
+class IdGenerator {
+
+	static get styleId() {
+		return styleId;
+	}
+
+	static generateInternalTooltipUID() {
+		return Math.round((Math.pow(36, idLen + 1) - Math.random() * Math.pow(36, idLen))).toString(36).slice(1); // TODO: gotta make it so there are only letters, no numbers
+	}
+}
+
+export default IdGenerator;
\ No newline at end of file

From b942fa4701ec5c4a845d15ee2a0797af18a1c6ee Mon Sep 17 00:00:00 2001
From: kebabmaster <ieshevyakov@gmail.com>
Date: Wed, 4 Mar 2020 16:40:35 +0000
Subject: [PATCH 2/7] <style> element generated on render - working on HTML and
 non-HTML tooltips

---
 src/utils/idGenerator.js | 15 ---------------
 src/utils/uuid.js        | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 15 deletions(-)
 delete mode 100644 src/utils/idGenerator.js
 create mode 100755 src/utils/uuid.js

diff --git a/src/utils/idGenerator.js b/src/utils/idGenerator.js
deleted file mode 100644
index c150d983c..000000000
--- a/src/utils/idGenerator.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const idLen = 20;
-const styleId = Math.round((Math.pow(36, idLen + 1) - Math.random() * Math.pow(36, idLen))).toString(36).slice(1); // TODO: gotta make it so there are only letters, no numbers
-
-class IdGenerator {
-
-	static get styleId() {
-		return styleId;
-	}
-
-	static generateInternalTooltipUID() {
-		return Math.round((Math.pow(36, idLen + 1) - Math.random() * Math.pow(36, idLen))).toString(36).slice(1); // TODO: gotta make it so there are only letters, no numbers
-	}
-}
-
-export default IdGenerator;
\ No newline at end of file
diff --git a/src/utils/uuid.js b/src/utils/uuid.js
new file mode 100755
index 000000000..ef7e37bd3
--- /dev/null
+++ b/src/utils/uuid.js
@@ -0,0 +1,17 @@
+/**
+* By w3resource, 2020, https://www.w3resource.com/javascript-exercises/javascript-math-exercise-23.php
+*/
+
+export function generateUUID(){
+    var dt = new Date().getTime();
+
+    var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+        var r = (dt + Math.random()*16)%16 | 0;
+        dt = Math.floor(dt/16);
+        return (c === "x" ? r :(r&0x3|0x8)).toString(16);
+    });
+
+    uuid = "t" + uuid.substring(1, uuid.length); // CSS does not work correctly with classes starting with a numeric character
+
+    return uuid;
+}

From 78e3c2be784f2b96d8bb888b81785b2b38179dae Mon Sep 17 00:00:00 2001
From: kebabmaster <ieshevyakov@gmail.com>
Date: Wed, 4 Mar 2020 17:22:06 +0000
Subject: [PATCH 3/7] tests; package.json cleanup

---
 package-lock.json        | 205 +++++++++------------------------------
 package.json             |   2 -
 src/decorators/styler.js | 155 +++++++++++++++--------------
 src/index.js             |  25 +++--
 test/index.spec.js       |  65 ++++++-------
 5 files changed, 173 insertions(+), 279 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 801ce0e6c..b96a5a123 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2278,16 +2278,6 @@
       "integrity": "sha1-rglCYAspkS8NKxTsYMRejzMLYRA=",
       "dev": true
     },
-    "aphrodite-jss": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/aphrodite-jss/-/aphrodite-jss-2.1.0.tgz",
-      "integrity": "sha512-25gINvLunuuVbegcnkLTXcCGKN/xeuVSW+Gl5elV5DhUeT+ueIpTghdyjaXmpiklzrQjXKZGSWbic+33DM+Q0A==",
-      "requires": {
-        "jss": "^8.1.0",
-        "jss-preset-default": "^3.0.0",
-        "murmurhash-js": "^1.0.0"
-      }
-    },
     "application-config": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/application-config/-/application-config-0.1.2.tgz",
@@ -5480,14 +5470,6 @@
         }
       }
     },
-    "css-vendor": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
-      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
-      "requires": {
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -6323,6 +6305,14 @@
         "object.values": "^1.0.4",
         "prop-types": "^15.5.10",
         "uuid": "^3.0.1"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "enzyme-adapter-react-16": {
@@ -8250,15 +8240,6 @@
         }
       }
     },
-    "formatio": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/formatio/-/formatio-1.1.1.tgz",
-      "integrity": "sha1-XtPM1jZVEJc4NGXZlhmRAOhhYek=",
-      "dev": true,
-      "requires": {
-        "samsam": "~1.1"
-      }
-    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -10467,11 +10448,6 @@
       "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
       "dev": true
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
-    },
     "is-integer": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-integer/-/is-integer-1.0.7.tgz",
@@ -11335,6 +11311,14 @@
             "tough-cookie": "~2.5.0",
             "tunnel-agent": "^0.6.0",
             "uuid": "^3.3.2"
+          },
+          "dependencies": {
+            "uuid": {
+              "version": "3.4.0",
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+              "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+              "dev": true
+            }
           }
         },
         "source-map": {
@@ -12017,6 +12001,14 @@
             "tough-cookie": "~2.5.0",
             "tunnel-agent": "^0.6.0",
             "uuid": "^3.3.2"
+          },
+          "dependencies": {
+            "uuid": {
+              "version": "3.4.0",
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+              "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+              "dev": true
+            }
           }
         },
         "source-map": {
@@ -12144,88 +12136,6 @@
         }
       }
     },
-    "jss": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-8.1.0.tgz",
-      "integrity": "sha512-NZ4CNAoPaPlM2rqHxPG5uGQbQEFZ9n1PITn0+wGIdAk2ZtA/F6el0SphLHf8So1Sx6N34hnVFFIuc32/hdsEzw==",
-      "requires": {
-        "is-in-browser": "^1.0.2",
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-camel-case": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-5.0.0.tgz",
-      "integrity": "sha512-vz11ip5EIlGuevtlUo9xIgiuD+it4Ebbb0+Y4o0A4oA8eOWY4aY7ihi/L7WvkQ54xnGOjUvLZ6nm2VYch2ufYg=="
-    },
-    "jss-compose": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-4.0.0.tgz",
-      "integrity": "sha512-VnsEziD2Lwrfwp10wx39FNybRLW5+RX/E2qQAXPAMbS+nHc0Jf2dC6ZiCfn5FaBGrpzLfIZ9MalTJDx4CQoMAQ==",
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-default-unit": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-7.0.0.tgz",
-      "integrity": "sha512-U1Oi1h45vFRuISr+g1DQ3Oua7CkNKNs47fTdiT/lHkuBMc6BBDUbPv9IbPPhk9gsEaX45Iy9TX8CAuaHLPCfEA=="
-    },
-    "jss-expand": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-4.0.1.tgz",
-      "integrity": "sha512-LRIMXXChAOgnhwSqYLJg8MS6dI98bf/sg52pAg04pbjOAtjfzyS0JTnQAiyk3PxqR3nKFR/Yv44ahpIpkdcxVA=="
-    },
-    "jss-extend": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-5.0.0.tgz",
-      "integrity": "sha512-fUp+9KipbdmzSfTxNHoT3mrFnE7fYn7EyHg3LTUexfpWrwj5Afkwb3iCfYV7GYCpg9OKDsqc18atwjHvSPWWKg==",
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-global": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-2.0.0.tgz",
-      "integrity": "sha512-/FSOMp4lF/vg47T/w8kKvL9tu7ka9am8N4izS63W81Qlay9hAq6xe9RxrPxygLpnn4KEb8LNbkKRoUv4SJfQsQ=="
-    },
-    "jss-nested": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-5.0.0.tgz",
-      "integrity": "sha512-9Molau+XVpSc6QEco3EC5yXmzeGMc5ZVII8+qy6jD6bvu6Y9mpfGoJ00LalR/n7xr/LC7Cxgs44UQQlLzumMBg==",
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-preset-default": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-3.0.0.tgz",
-      "integrity": "sha512-5wRsHsV89XjnQlUVN5jQfo6gcfcirDJmsMJL52HmWoQlV9SA+jhUtt1w3LjcJHe4e3tX4u/To/x3Btmhi+LZtQ==",
-      "requires": {
-        "jss-camel-case": "^5.0.0",
-        "jss-compose": "^4.0.0",
-        "jss-default-unit": "^7.0.0",
-        "jss-expand": "^4.0.0",
-        "jss-extend": "^5.0.0",
-        "jss-global": "^2.0.0",
-        "jss-nested": "^5.0.0",
-        "jss-props-sort": "^5.0.0",
-        "jss-vendor-prefixer": "^6.0.0"
-      }
-    },
-    "jss-props-sort": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-5.0.0.tgz",
-      "integrity": "sha512-xtoVE7BlcPaMN/dzypHPYJn+QiphLPB1skypAOp9zLkOozPbR/x0JVAFdZnd7zqmmjvg+Ma/txjSg0HN/eZsGA=="
-    },
-    "jss-vendor-prefixer": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-6.0.0.tgz",
-      "integrity": "sha512-leqW7B2QLXYsUNR3jsUZP3CkuOYcWXyfF8TSJc4XNxhVCNH7ztK5dcnF8nLoMnxT0w/ajloeJKcch2ty/viCAA==",
-      "requires": {
-        "css-vendor": "^0.3.8"
-      }
-    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -12782,12 +12692,6 @@
         "chalk": "^2.4.2"
       }
     },
-    "lolex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz",
-      "integrity": "sha1-fD2mL/yzDw9agKJWbKJORdigHzE=",
-      "dev": true
-    },
     "longest": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -13612,6 +13516,14 @@
             "tough-cookie": "~2.5.0",
             "tunnel-agent": "^0.6.0",
             "uuid": "^3.3.2"
+          },
+          "dependencies": {
+            "uuid": {
+              "version": "3.4.0",
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+              "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+              "dev": true
+            }
           }
         },
         "source-map": {
@@ -13732,11 +13644,6 @@
         "strip-indent": "^1.0.0"
       }
     },
-    "murmurhash-js": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
-      "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
-    },
     "mute-stream": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.6.tgz",
@@ -13926,6 +13833,14 @@
             "tough-cookie": "~2.5.0",
             "tunnel-agent": "^0.6.0",
             "uuid": "^3.3.2"
+          },
+          "dependencies": {
+            "uuid": {
+              "version": "3.4.0",
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+              "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+              "dev": true
+            }
           }
         },
         "rimraf": {
@@ -14153,6 +14068,14 @@
             "tough-cookie": "~2.5.0",
             "tunnel-agent": "^0.6.0",
             "uuid": "^3.3.2"
+          },
+          "dependencies": {
+            "uuid": {
+              "version": "3.4.0",
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+              "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+              "dev": true
+            }
           }
         },
         "supports-color": {
@@ -17360,12 +17283,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
-    "samsam": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz",
-      "integrity": "sha1-vsEf3IOp/aBjQBIQ5AF2wwJNFWc=",
-      "dev": true
-    },
     "sane": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
@@ -18112,18 +18029,6 @@
         }
       }
     },
-    "sinon": {
-      "version": "1.17.7",
-      "resolved": "https://registry.npmjs.org/sinon/-/sinon-1.17.7.tgz",
-      "integrity": "sha1-RUKk9JugxFwF6y6d2dID4rjv4L8=",
-      "dev": true,
-      "requires": {
-        "formatio": "1.1.1",
-        "lolex": "1.3.2",
-        "samsam": "1.1.2",
-        "util": ">=0.10.3 <1"
-      }
-    },
     "sisteransi": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.4.tgz",
@@ -20728,12 +20633,6 @@
         "object.getownpropertydescriptors": "^2.1.0"
       }
     },
-    "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
-    },
     "v8-compile-cache": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
@@ -20835,14 +20734,6 @@
         "makeerror": "1.0.x"
       }
     },
-    "warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "watchify": {
       "version": "3.11.1",
       "resolved": "https://registry.npmjs.org/watchify/-/watchify-3.11.1.tgz",
diff --git a/package.json b/package.json
index 26b80d0d1..7f9cfe552 100755
--- a/package.json
+++ b/package.json
@@ -52,7 +52,6 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
-    "aphrodite-jss": "^2.1.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
@@ -118,7 +117,6 @@
     "rollup-plugin-eslint": "7.0.0",
     "rollup-plugin-stylelint": "1.0.0",
     "semantic-release": "15.1.5",
-    "sinon": "^1.17.7",
     "snazzy": "^2.0.1",
     "standard": "^5.2.2",
     "uglifyjs": "^2.4.10",
diff --git a/src/decorators/styler.js b/src/decorators/styler.js
index 7e78ac5ab..3a734e679 100755
--- a/src/decorators/styler.js
+++ b/src/decorators/styler.js
@@ -1,94 +1,99 @@
-import { StyleSheet } from "aphrodite-jss";
 import { getDefaultPopupColors } from "./defaultStyles";
 
 /**
- * Generates the tooltip style based on the element-specified "data-type" property.
+* Generates the specific tooltip style for use on render.
+*/
+export function generateTooltipStyle(uuid, customColors, type, hasBorder) {
+	return generateStyle(uuid, getPopupColors(customColors, type, hasBorder));
+}
+
+/**
+ * Generates the tooltip style rules based on the element-specified "data-type" property.
  */
-export function getTooltipStyle(colors) {
+function generateStyle(uuid, colors) {
   const textColor = colors.text;
   const backgroundColor = colors.background;
   const borderColor = colors.border;
   const arrowColor = colors.arrow;
 
-  return StyleSheet.create({
-    "__react_component_tooltip": {
-      "color": textColor,
-      "backgroundColor": backgroundColor,
-      "border": "1px solid " + borderColor,
+  return `
+  	.${uuid} {
+	    color: ${textColor};
+	    background: ${backgroundColor};
+	    border: 1px solid ${borderColor};
+  	}
 
-      "&.place-top": {
-        "margin-top": "-10px"
-      },
-      "&.place-top::before": {
-        "border-top": "8px solid " + borderColor
-      },
-      "&.place-top::after": {
-        "border-left": "8px solid transparent",
-        "border-right": "8px solid transparent",
-        "bottom": "-6px",
-        "left": "50%",
-        "margin-left": "-8px",
-        "border-top-color": arrowColor,
-        "border-top-style": "solid",
-        "border-top-width": "6px"
-      },
+  	.${uuid}.place-top {
+        margin-top: -10px;
+    }
+    .${uuid}.place-top::before {
+        border-top: 8px solid ${borderColor};
+    }
+    .${uuid}.place-top::after {
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        bottom: -6px;
+        left: 50%;
+        margin-left: -8px;
+        border-top-color: ${arrowColor};
+        border-top-style: solid;
+        border-top-width: 6px;
+    }
 
-      "&.place-bottom": {
-        "margin-top": "10px"
-      },
-      "&.place-bottom::before": {
-        "border-bottom": "8px solid " + borderColor
-      },
-      "&.place-bottom::after": {
-        "border-left": "8px solid transparent",
-        "border-right": "8px solid transparent",
-        "top": "-6px",
-        "left": "50%",
-        "margin-left": "-8px",
-        "border-bottom-color": arrowColor,
-        "border-bottom-style": "solid",
-        "border-bottom-width": "6px"
-      },
+    .${uuid}.place-bottom {
+        margin-top: 10px;
+    }
+    .${uuid}.place-bottom::before {
+        border-bottom: 8px solid ${borderColor};
+    }
+    .${uuid}.place-bottom::after {
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        top: -6px;
+        left: 50%;
+        margin-left: -8px;
+        border-bottom-color: ${arrowColor};
+        border-bottom-style: solid;
+        border-bottom-width: 6px;
+    }
 
-      "&.place-left": {
-        "margin-left": "-10px"
-      },
-      "&.place-left::before": {
-        "border-left": "8px solid " + borderColor
-      },
-      "&.place-left::after": {
-        "border-top": "5px solid transparent",
-        "border-bottom": "5px solid transparent",
-        "right": "-6px",
-        "top": "50%",
-        "margin-top": "-4px",
-        "border-left-color": arrowColor,
-        "border-left-style": "solid",
-        "border-left-width": "6px"
-      },
+    .${uuid}.place-left {
+        margin-left: -10px;
+    }
+    .${uuid}.place-left::before {
+        border-left: 8px solid ${borderColor};
+    }
+    .${uuid}.place-left::after {
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        right: -6px;
+        top: 50%;
+        margin-top: -4px;
+        border-left-color: ${arrowColor};
+        border-left-style: solid;
+        border-left-width: 6px;
+    }
 
-      "&.place-right": {
-        "margin-left": "10px"
-      },
-      "&.place-right::before": {
-        "border-right": "8px solid " + borderColor
-      },
-      "&.place-right::after": {
-        "border-top": "5px solid transparent",
-        "border-bottom": "5px solid transparent",
-        "left": "-6px",
-        "top": "50%",
-        "margin-top": "-4px",
-        "border-right-color": arrowColor,
-        "border-right-style": "solid",
-        "border-right-width": "6px"
-      }
+    .${uuid}.place-right {
+        margin-left: 10px;
+    }
+    .${uuid}.place-right::before {
+        border-right: 8px solid ${borderColor};
+    }
+    .${uuid}.place-right::after {
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        left: -6px;
+        top: 50%;
+        margin-top: -4px;
+        border-right-color: ${arrowColor};
+        border-right-style: solid;
+        border-right-width: 6px;
     }
-  });
+  `;
 }
 
-// Get popup colors
-export function getPopupColors(customColors, type, hasBorder) {
+function getPopupColors(customColors, type, hasBorder) {
   const textColor = customColors.text;
   const backgroundColor = customColors.background;
   const borderColor = customColors.border;
diff --git a/src/index.js b/src/index.js
index 46d381831..cf8dca947 100755
--- a/src/index.js
+++ b/src/index.js
@@ -16,11 +16,11 @@ import getPosition from "./utils/getPosition";
 import getTipContent from "./utils/getTipContent";
 import { parseAria } from "./utils/aria";
 import nodeListToArray from "./utils/nodeListToArray";
+import { generateUUID } from "./utils/uuid";
 
 /* CSS */
 import "./index.scss";
-import { css } from "aphrodite-jss";
-import { getTooltipStyle, getPopupColors } from "./decorators/styler";
+import { generateTooltipStyle } from "./decorators/styler";
 
 @staticMethods
 @windowListener
@@ -32,6 +32,7 @@ import { getTooltipStyle, getPopupColors } from "./decorators/styler";
 class ReactTooltip extends React.Component {
   static get propTypes() {
     return {
+      uuid: PropTypes.string,
       children: PropTypes.any,
       place: PropTypes.string,
       type: PropTypes.string,
@@ -86,6 +87,7 @@ class ReactTooltip extends React.Component {
     super(props);
 
     this.state = {
+      uuid: generateUUID(),
       place: props.place || "top", // Direction of tooltip
       desiredPlace: props.place || "top",
       type: "dark", // Color theme of tooltip
@@ -670,11 +672,13 @@ class ReactTooltip extends React.Component {
 
   render() {
     const { extraClass, html, ariaProps, disable } = this.state;
-    const placeholder = this.getTooltipContent();
-    const isEmptyTip = this.isEmptyTip(placeholder);
+    const content = this.getTooltipContent();
+    const isEmptyTip = this.isEmptyTip(content);
+    const style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border);
 
     const tooltipClass =
       "__react_component_tooltip" +
+      ` ${this.state.uuid}` +
       (this.state.show && !disable && !isEmptyTip ? " show" : "") +
       (this.state.border ? " border" : "") +
       ` place-${this.state.place}` + // top, bottom, left, right
@@ -682,8 +686,6 @@ class ReactTooltip extends React.Component {
       (this.props.delayUpdate ? " allow_hover" : "") +
       (this.props.clickable ? " allow_click" : "");
 
-    const tooltipStyle = getTooltipStyle(getPopupColors(this.state.customColors, this.state.type, this.state.border));
-
     let Wrapper = this.props.wrapper;
 
     if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) {
@@ -693,26 +695,29 @@ class ReactTooltip extends React.Component {
     const wrapperClassName = [tooltipClass, extraClass].filter(Boolean).join(" ");
 
     if (html) {
+      const htmlContent = `${content}\n<style>${style}</style>`;
+
       return (
         <Wrapper
-          className={`${css(tooltipStyle["__react_component_tooltip"])} ${wrapperClassName}`}
+          className={`${wrapperClassName}`}
           id={this.props.id}
           ref={ref => (this.tooltipRef = ref)}
           {...ariaProps}
           data-id="tooltip"
-          dangerouslySetInnerHTML={{ __html: placeholder }}
+          dangerouslySetInnerHTML={{ __html: htmlContent }}
         />
       );
     } else {
       return (
         <Wrapper
-          className={`${css(tooltipStyle["__react_component_tooltip"])} ${wrapperClassName}`}
+          className={`${wrapperClassName}`}
           id={this.props.id}
           {...ariaProps}
           ref={ref => (this.tooltipRef = ref)}
           data-id="tooltip"
         >
-          {placeholder}
+          <style dangerouslySetInnerHTML={{ __html: style }} />
+          {content}
         </Wrapper>
       );
     }
diff --git a/test/index.spec.js b/test/index.spec.js
index 8ea4cecfe..4a25b5185 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -1,17 +1,12 @@
 import React from 'react'
-import {expect} from 'chai'
+import { expect } from 'chai'
 const forEach = require('mocha-each')
 const jsdom = require('mocha-jsdom')
 import ReactTooltip from '../src/index.js'
 import { render, cleanup } from '@testing-library/react'
-import * as Aphrodite from 'aphrodite-jss'
-import sinon from 'sinon'
-
-const spy = sinon.spy(Aphrodite.StyleSheet, 'create')
 
 afterEach(() => {
     cleanup()
-    spy.reset()
 })
 
 describe('Tooltip', () => {
@@ -19,63 +14,63 @@ describe('Tooltip', () => {
 
 	forEach([
             [{'textColor': 'green', 'backgroundColor': 'red', 'arrowColor': 'blue'}, 
-              {popupType: 'type-custom', textColor: 'green', backgroundColor: 'red', arrowColor: 'blue'}],
+              {popupType: 'type-custom', textColor: 'green', background: 'red', arrowColor: 'blue'}],
             [{'textColor': 'green', 'backgroundColor': 'red', 'arrowColor': 'blue', 'borderColor': 'teal'}, 
-              {popupType: 'type-custom', textColor: 'green', backgroundColor: 'red', arrowColor: 'blue', borderColor: 'transparent'}],
+              {popupType: 'type-custom', textColor: 'green', background: 'red', arrowColor: 'blue', borderColor: 'transparent'}],
             [{'textColor': 'green', 'backgroundColor': 'red', 'arrowColor': 'blue', 'border': true, 'borderColor': 'teal'}, 
-              {popupType: 'type-custom', textColor: 'green', backgroundColor: 'red', arrowColor: 'blue', borderColor: 'teal'}],
+              {popupType: 'type-custom', textColor: 'green', background: 'red', arrowColor: 'blue', borderColor: 'teal'}],
             [{'textColor': 'green', 'backgroundColor': 'red', 'arrowColor': 'blue', 'border': false, 'borderColor': 'teal'}, 
-              {popupType: 'type-custom', textColor: 'green', backgroundColor: 'red', arrowColor: 'blue'}],
+              {popupType: 'type-custom', textColor: 'green', background: 'red', arrowColor: 'blue'}],
             [{'textColor': 'teal', 'backgroundColor': 'orange'}, 
-              {popupType: 'type-custom', textColor: 'teal', backgroundColor: 'orange'}],
+              {popupType: 'type-custom', textColor: 'teal', background: 'orange'}],
             [{'textColor': 'green', 'arrowColor': 'red'}, 
-              {popupType: 'type-custom', textColor: 'green', backgroundColor: '#222', arrowColor: 'red'}], 
+              {popupType: 'type-custom', textColor: 'green', background: '#222', arrowColor: 'red'}], 
             [{'backgroundColor': 'green', 'arrowColor': 'yellow'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: 'green', arrowColor: 'yellow'}],
+              {popupType: 'type-custom', textColor: '#fff', background: 'green', arrowColor: 'yellow'}],
             [{'textColor': 'red'}, 
-              {popupType: 'type-custom', textColor: 'red', backgroundColor: '#222'}],
+              {popupType: 'type-custom', textColor: 'red', background: '#222'}],
             [{'textColor': 'red', 'borderColor': 'pink'}, 
-              {popupType: 'type-custom', textColor: 'red', backgroundColor: '#222'}],
+              {popupType: 'type-custom', textColor: 'red', background: '#222'}],
             [{'textColor': 'red', 'border': true, 'borderColor': 'pink'}, 
-              {popupType: 'type-custom', textColor: 'red', backgroundColor: '#222', borderColor: 'pink'}],
+              {popupType: 'type-custom', textColor: 'red', background: '#222', borderColor: 'pink'}],
             [{'backgroundColor': 'red'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: 'red'}],
+              {popupType: 'type-custom', textColor: '#fff', background: 'red'}],
             [{'backgroundColor': 'red', 'borderColor': 'yellow'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: 'red'}],
+              {popupType: 'type-custom', textColor: '#fff', background: 'red'}],
             [{'backgroundColor': 'red', 'border': true, 'borderColor': 'yellow'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: 'red', borderColor: 'yellow'}],
+              {popupType: 'type-custom', textColor: '#fff', background: 'red', borderColor: 'yellow'}],
             [{'arrowColor': 'red'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: '#222', arrowColor: 'red'}],
+              {popupType: 'type-custom', textColor: '#fff', background: '#222', arrowColor: 'red'}],
             [{'arrowColor': 'red', 'borderColor': 'green'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: '#222', arrowColor: 'red'}],
+              {popupType: 'type-custom', textColor: '#fff', background: '#222', arrowColor: 'red'}],
             [{'arrowColor': 'red', 'border': true, 'borderColor': 'green'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: '#222', arrowColor: 'red', borderColor: 'green'}],
+              {popupType: 'type-custom', textColor: '#fff', background: '#222', arrowColor: 'red', borderColor: 'green'}],
             [{'borderColor': 'blue'}, 
-              {popupType: 'type-dark', textColor: '#fff', backgroundColor: '#222', arrowColor: '#222'}],
+              {popupType: 'type-dark', textColor: '#fff', background: '#222', arrowColor: '#222'}],
             [{'border': true, 'borderColor': 'blue'}, 
-              {popupType: 'type-custom', textColor: '#fff', backgroundColor: '#222', arrowColor: '#222', borderColor: 'blue'}],
+              {popupType: 'type-custom', textColor: '#fff', background: '#222', arrowColor: '#222', borderColor: 'blue'}],
 		]).it('Popup color generation - show', (props, res) => {
            render(<span id='colorSpecInvoker' data-tip data-for='colorSpec'>Invoker</span>)
            render(<ReactTooltip id='colorSpec' {...props}/>)
-
-           const tooltip = document.getElementById('colorSpec')
-
            document.getElementById('colorSpecInvoker').dispatchEvent(new window.Event('mouseenter'))
 
-           const tooltipGeneratedClass = spy.returnValues[1]['__react_component_tooltip'].className
-           const tooltipGeneratedStyle = spy.returnValues[1]['__react_component_tooltip'].style
+           const tooltip = document.getElementById('colorSpec')
 
            expect(tooltip.className).to.
-           equal(tooltipGeneratedClass + ' __react_component_tooltip show' + (props.border ? ' border ' : ' ') + 'place-top ' + res.popupType)
+           match(new RegExp('__react_component_tooltip [a-zA-Z0-9-]+ show' + (props.border ? ' border ' : ' ') + 'place-top ' + res.popupType, 'i'))
+
+           const uuid = tooltip.className.split(' ')[1]
+           const cssRules = tooltip.firstElementChild.sheet.cssRules
+           const mainCssRule = cssRules.find(rule => rule.selectorText === `.${uuid}`).style
 
-           expect(tooltipGeneratedStyle.color, 'Text color').to.equal(res.textColor)
-           expect(tooltipGeneratedStyle.backgroundColor, 'Background color').to.equal(res.backgroundColor)
-           expect(tooltipGeneratedStyle.border, 'Border color').to.equal('1px solid ' + (res.borderColor ? res.borderColor : 'transparent'))
+           expect(mainCssRule.color, 'Text color').to.equal(res.textColor)
+           expect(mainCssRule.background, 'Background color').to.equal(res.background)
+           expect(mainCssRule.border, 'Border color').to.equal('1px solid ' + (res.borderColor ? res.borderColor : 'transparent'))
 
            const arrowPositions = ['top', 'bottom', 'left', 'right']
            arrowPositions.forEach((pos) => {
-              expect(tooltipGeneratedStyle['&.place-' + pos + '::after']['border-' + pos + '-color'], pos + ' arrow color').to.
-              equal(res.arrowColor ? res.arrowColor : res.backgroundColor)
+              expect(cssRules.find(rule => rule.selectorText === `.${uuid}.place-${pos}::after`).style[`border-${pos}-color`], pos + ' arrow color').to.
+              equal(res.arrowColor ? res.arrowColor : res.background)
            })
   })
 })
\ No newline at end of file

From 32318b498684e9685e81967c8c30606bf5382e7b Mon Sep 17 00:00:00 2001
From: kebabmaster <ieshevyakov@gmail.com>
Date: Wed, 4 Mar 2020 17:23:09 +0000
Subject: [PATCH 4/7] fix(aphrodite_jss_deprecation - aphrodite_jss replaced
 with custom styling solution


From 92fcf5bc62e39c27809b280c7ae095a2a9f12857 Mon Sep 17 00:00:00 2001
From: kebabmaster <ieshevyakov@gmail.com>
Date: Wed, 4 Mar 2020 21:40:40 +0000
Subject: [PATCH 5/7] fix(aphrodite_jss_deprecation): aphrodite_jss replaced
 with custom solution


From 1fe49dc492073e48f20267c6e8fbe25bc3081bf2 Mon Sep 17 00:00:00 2001
From: kebabmaster <ieshevyakov@gmail.com>
Date: Mon, 9 Mar 2020 10:04:58 +0000
Subject: [PATCH 6/7] fix(no_var) - no vars allowed

---
 .eslintrc         | 3 ++-
 src/index.js      | 8 ++++----
 src/utils/uuid.js | 6 +++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index e66aa3fba..10bb5da51 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -47,6 +47,7 @@
     "comma-dangle": ["error", "never"],
     "semi": ["error", "always"],
     "object-curly-spacing": ["error", "always"],
-    "quote-props": ["error", "consistent"]
+    "quote-props": ["error", "consistent"],
+    "no-var": ["error"]
   }
 }
diff --git a/src/index.js b/src/index.js
index cf8dca947..2e6be87cb 100755
--- a/src/index.js
+++ b/src/index.js
@@ -395,13 +395,13 @@ class ReactTooltip extends React.Component {
     // To prevent previously created timers from triggering
     this.clearTimer();
 
-    var target = e.currentTarget;
+    const target = e.currentTarget;
 
-    var reshowDelay = this.state.show ? (target.getAttribute("data-delay-update") || this.props.delayUpdate) : 0;
+    const reshowDelay = this.state.show ? (target.getAttribute("data-delay-update") || this.props.delayUpdate) : 0;
 
-    var self = this;
+    const self = this;
 
-    var updateState = function updateState() {
+    const updateState = function updateState() {
       self.setState({
           originTooltip: originTooltip,
           isMultiline: isMultiline,
diff --git a/src/utils/uuid.js b/src/utils/uuid.js
index ef7e37bd3..794cd1d11 100755
--- a/src/utils/uuid.js
+++ b/src/utils/uuid.js
@@ -3,10 +3,10 @@
 */
 
 export function generateUUID(){
-    var dt = new Date().getTime();
+    let dt = new Date().getTime();
 
-    var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-        var r = (dt + Math.random()*16)%16 | 0;
+    let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+        const r = (dt + Math.random()*16)%16 | 0;
         dt = Math.floor(dt/16);
         return (c === "x" ? r :(r&0x3|0x8)).toString(16);
     });

From c591804d028ca086f226ee43ef9a0a8e525c1bfc Mon Sep 17 00:00:00 2001
From: kebabmaster <ieshevyakov@gmail.com>
Date: Mon, 9 Mar 2020 10:07:23 +0000
Subject: [PATCH 7/7] fix(no_var): no vars allowed