3 files changed, 53 insertions, 1 deletions
diff --git a/play.css b/play.css
index 925a777..64c66b0 100644
--- a/play.css
+++ b/play.css
@@ -59,6 +59,29 @@ aside {
 	gap: 15px;
 }
 
+#tooltip {
+	display: none;
+	pointer-events: none;
+	position: fixed;
+	z-index: 600;
+	right: 240px;
+	top: 60px;
+}
+
+#tooltip.show {
+	display: block;
+}
+
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
 /* CARD ACTION POPUP MENU */
 
 #popup { max-width: 250px; }
@@ -258,6 +281,14 @@ aside {
 	display: block;
 }
 
+#tooltip.card {
+	background-position: center;
+	background-size: 377px 528px;
+	width: 372px;
+	height: 524px;
+	border-radius: 20px;
+}
+
 .shift .hand .card:hover, .shift .hand .card.selected {
 	transform: scale(1.5) translate(0,-30px);
 	z-index: 10;
diff --git a/play.html b/play.html
index 4767218..2e8a385 100644
--- a/play.html
+++ b/play.html
@@ -17,6 +17,8 @@
 </head>
 <body>
 
+<div id="tooltip"></div>
+
 <menu id="popup">
 	<li class="title">CARD
 	<li class="separator">
diff --git a/play.js b/play.js
index e7a684d..5b75f51 100644
--- a/play.js
+++ b/play.js
@@ -17,13 +17,32 @@ let ui = {
 	cu: [],
 }
 
+function on_focus_card_tip(card_number) {
+	document.getElementById("tooltip").className = "card show card_" + card_number
+}
+
+function on_blur_card_tip() {
+	document.getElementById("tooltip").classList = "card"
+}
+
+function on_focus_last_card() {
+	if (typeof view.last_card === 'number') {
+		document.getElementById("tooltip").className = "card show card_" + view.last_card
+	}
+}
+
+function on_blur_last_card() {
+	document.getElementById("tooltip").classList = "card"
+}
+
 function on_log(text) {
 	let p = document.createElement("div")
 	text = text.replace(/&/g, "&amp;")
 	text = text.replace(/</g, "&lt;")
 	text = text.replace(/>/g, "&gt;")
 
-	text = text.replace(/\[(\d+)([^\]]*)\]/, '<span class="card_tip" data-card="$1">$1$2</span>')
+	text = text.replace(/#(\d+)/g,
+		'<span class="tip" onmouseenter="on_focus_card_tip($1)" onmouseleave="on_blur_card_tip()">$&</span>')
 
 	if (text.match(/^\.h1 /)) {
 		p.className = "h1"