3 files changed, 29 insertions, 0 deletions
diff --git a/play.css b/play.css
index 792b1a4..ca618b2 100644
--- a/play.css
+++ b/play.css
@@ -45,6 +45,24 @@ body {
 	background-color: #ece1a9;
 }
 
+#tooltip {
+	pointer-events: none;
+	position: fixed;
+	z-index: 600;
+	right: 240px;
+	top: 60px;
+}
+
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
 #political_display {
 	position: relative;
 	width: 877px;
diff --git a/play.html b/play.html
index fc19c08..97bb137 100644
--- a/play.html
+++ b/play.html
@@ -17,6 +17,8 @@
 </head>
 <body>
 
+<div id="tooltip" class="hide"></div>
+
 <header>
 	<div id="toolbar">
 		<details>
diff --git a/play.js b/play.js
index c76d8c6..6e99804 100644
--- a/play.js
+++ b/play.js
@@ -444,6 +444,7 @@ const ui = {
 	prompt: document.getElementById("prompt"),
 	status: document.getElementById("status"),
 	header: document.querySelector("header"),
+	tooltip: document.getElementById("tooltip"),
 	spaces_element: document.getElementById("spaces"),
 	pieces_element: document.getElementById("pieces"),
 	markers_element: document.getElementById("markers"),
@@ -830,6 +831,14 @@ function on_blur_piece_tip(s) {
 	ui.pieces[s].classList.remove("tip")
 }
 
+function on_focus_political_tip(c) {
+	ui.tooltip.className = "card polcard c" + c
+}
+
+function on_blur_political_tip() {
+	ui.tooltip.className = "hide"
+}
+
 function on_focus_city(evt) {
 	ui.status.textContent = data.cities.name[evt.target.my_id]
 }