diff --git a/src/003-assets/CSS/tooltip.css b/src/003-assets/CSS/tooltip.css
deleted file mode 100644
index 719d9e6bd315955439b5c7480bf150a143fec72a..0000000000000000000000000000000000000000
--- a/src/003-assets/CSS/tooltip.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * pure CSS tooltip
- * based on https://codeconvey.com/pure-html5-css-tooltips-using-title-data-attribute/
- */
-.exampleTooltip, .devotion, .trust, .defiant {
-	position: relative;
-	display: inline;
-}
-
-.exampleTooltip:after, .devotion:after, .trust:after, .defiant:after {
-	display: block;
-	visibility: hidden;
-	position: absolute;
-	font-size: smaller;
-	width: 20em;
-	height: auto;
-	background-color: slategray;
-	color: black;
-	text-decoration: none;
-	font-style: normal;
-	text-align: center;
-	border-radius: 3px;
-	padding: 5px;
-	z-index: 999;
-	bottom: 0;
-	left: 10px;
-}
-
-.exampleTooltip:after {
-	content: "I am a helpful tooltip. We are very rare because we are still in development.";
-}
-
-.devotion:after {
-	content: "Devotion is a measure of a slave's love for you.";
-}
-
-.trust:after {
-	content: "Trust is a measure of a slave's expectations of you and confidence to perform well.";
-}
-
-.defiant:after {
-	content: "Defiant slaves will actively work against you.";
-}
-
-/* makes the arrow */
-.exampleTooltip:before, .devotion:before, .trust:before, .defiant:before {
-	position: absolute;
-	visibility: hidden;
-	width: 0;
-	height: 0;
-	left: 20px;
-	bottom: 0;
-	opacity: 0;
-	content: "";
-	border-style: solid;
-	border-width: 6px 6px 0 6px;
-	border-color: slategray transparent transparent transparent;
-	z-index: 999;
-}
-
-div.tooltipsEnabled .exampleTooltip:hover:after, div.tooltipsEnabled .devotion:hover:after, div.tooltipsEnabled .trust:hover:after, div.tooltipsEnabled .defiant:hover:after {
-	visibility: visible;
-	opacity: 1;
-	bottom: 20px;
-}
-
-div.tooltipsEnabled .exampleTooltip:hover:before, div.tooltipsEnabled .devotion:hover:before, div.tooltipsEnabled .trust:hover:before, div.tooltipsEnabled .defiant:hover:before {
-	visibility: visible;
-	opacity: 1;
-	bottom: 15px;
-}
diff --git a/src/gui/tooltips.js b/src/gui/tooltips.js
new file mode 100644
index 0000000000000000000000000000000000000000..b821534873d7be11baabcc19c973a73f3067f71d
--- /dev/null
+++ b/src/gui/tooltips.js
@@ -0,0 +1,55 @@
+(function() {
+	// The performance impact is around O(tooltips * nodes), with large passages (main, slave assignment report) adding
+	// tooltips could potentially take a significant amount of time when there are many potential tooltips.
+	const tooltips = {
+		exampleTooltip: "I am a helpful tooltip. We are very rare because we are still in development.",
+
+		devotion: "Devotion is a measure of a slave's love for you.",
+		trust: "Trust is a measure of a slave's expectations of you and confidence to perform well.",
+		defiant: "Defiant slaves will actively work against you.",
+
+		flaw: "Flaws impend your slaves performance. Try removing or converting them into quirks.",
+		intelligent: "More intelligent slaves tend to perform better.",
+		health: "The healthier your slaves, the better they perform.",
+		positive: "This is good.",
+		// noteworthy: "This is important.",
+		warning: "This is very bad. Try removing the cause for this.",
+
+		error: "Something just broke. Please report this.",
+
+		cash: "Money. Always useful.",
+		reputation: "Your reputation as a slaveowner. The more, the better.",
+		/*
+		skill: "t",
+		fetish: "t",
+		relationship: "t",
+		change: "t",
+		virginity: "t",
+		pregnant: "t",
+		stupid: "t",
+		education: "t",
+		*/
+	};
+
+	/**
+	 * @param {HTMLElement} container
+	 */
+	function addTooltips(container) {
+		if (V.tooltipsEnabled === 0) {
+			return;
+		}
+		for (const tooltipsKey in tooltips) {
+			const elements = container.getElementsByClassName(tooltipsKey);
+			for (const element of elements) {
+				element.title += `${tooltips[tooltipsKey]}\n`;
+			}
+		}
+	}
+
+	// passage
+	$(document).on(':passagerender', e => addTooltips(e.content));
+	// story caption
+	$(document).on(':passageend', () => addTooltips(document.getElementById("story-caption")));
+	// dialog
+	$(document).on(':dialogopening', e => addTooltips(e.target));
+})();
diff --git a/src/js/utilsDOM.js b/src/js/utilsDOM.js
index 7b8889be1d68e76a982bbae69575f25013469e88..bb016cc5a2faab9105a6aac1e6ef01c69f56766e 100644
--- a/src/js/utilsDOM.js
+++ b/src/js/utilsDOM.js
@@ -319,15 +319,6 @@ App.Utils.htmlToElement = function(text) {
 	return template.content.firstChild;
 };
 
-/*
- * Shows tooltips if they are enabled. Must be called on every passage load, because <body> gets reset.
- */
-$(document).on(":passagestart", event => {
-	if (V.tooltipsEnabled === 1) {
-		event.content.classList.add("tooltipsEnabled");
-	}
-});
-
 /**
  * Show a list of links (or disabled links) as a delimited strip
  * @param {Node[]} links