diff --git a/gorge.css b/gorge.css
index 11205ef..54fca8b 100644
--- a/gorge.css
+++ b/gorge.css
@@ -135,6 +135,31 @@ button {
margin: 10px;
}
+#powerup-tooltip {
+ position: fixed;
+ width: 400px;
+ background: #333;
+ display: none;
+ z-index: 1;
+ left: 0px;
+ top: 0px;
+}
+
+#powerup-tooltip-name {
+ font-size: 24px;
+ color: #eee;
+ margin: 10px;
+ top: 10px;
+ left: 10px;
+}
+
+#powerup-tooltip-desc {
+ font-size: 18px;
+ color: #bbb;
+ margin: 10px;
+ left: 10px;
+}
+
.building-button {
position: relative;
display: block;
@@ -602,4 +627,4 @@ div::-webkit-scrollbar-corner {
.powerup-entry-done {
transform: scale(1, 0);
max-height: 0px;
-}
\ No newline at end of file
+}
diff --git a/gorge.html b/gorge.html
index 4f8edd5..c0c76ea 100644
--- a/gorge.html
+++ b/gorge.html
@@ -35,6 +35,10 @@
Powerups
+
diff --git a/gorge.js b/gorge.js
index 5eb7439..bb304fa 100644
--- a/gorge.js
+++ b/gorge.js
@@ -110,7 +110,10 @@ function addPowerup(key, powerup) {
powerupList.appendChild(powerupEntry);
activePowerups[key] = {powerup: powerup, life: powerup.duration, maxLife: powerup.duration, element: powerupEntry };
-
+
+ powerupEntry.addEventListener("mousemove", function (e) { powerupTooltip(key, e); });
+ powerupEntry.addEventListener("mouseleave", function () { powerupTooltipRemove(); });
+
updateAll();
}
@@ -1157,6 +1160,36 @@ function buildingTooltipRemove() {
tooltip.style.setProperty("display", "none");
}
+function powerupTooltip(id, event) {
+
+ let tooltip = document.querySelector("#powerup-tooltip");
+ tooltip.style.setProperty("display", "inline-block");
+
+ const count = buildingCount();
+
+ fillTooltip("powerup", "name", powerups[id].name);
+ fillTooltip("powerup", "desc", powerups[id].description);
+
+ let xPos = tooltip.parentElement.getBoundingClientRect().x + 450;
+
+ // wow browsers are bad
+
+ var body = document.body,
+ html = document.documentElement;
+
+ var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+
+ let yPos = Math.min(event.clientY, height - 200);
+
+ tooltip.style.setProperty("transform", "translate(" + xPos + "px, " + yPos + "px)")
+}
+
+function powerupTooltipRemove() {
+ let tooltip = document.querySelector("#powerup-tooltip");
+
+ tooltip.style.setProperty("display", "none");
+}
+
window.onload = function () {
setup();