From 9df049d739b49cf34d9d5c7e666c5bf1ba14ae31 Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Sun, 13 Feb 2022 15:13:19 -0500
Subject: [PATCH] Implement mobile tooltips

---
 src/Calendar.scss | 20 ++++++++++++++++++++
 src/Calendar.tsx  |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/Calendar.scss b/src/Calendar.scss
index a9ffe56..08c7772 100644
--- a/src/Calendar.scss
+++ b/src/Calendar.scss
@@ -150,6 +150,26 @@
     background: $gray-300;
 }
 
+@media (pointer: coarse), (hover: none) {
+    .Day-rural {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        text-decoration: underline dashed;
+    }
+
+    .Day-rural:focus::after {
+        content: attr(title);
+        position: absolute;
+        top: 90%;
+        color: #000;
+        background-color: #fff;
+        border: 1px solid;
+        width: fit-content;
+        padding: 3px;
+    }
+}
+
 .Calendar-month-name.input-group {
     justify-content: center;
     font-size: 0.75em;
diff --git a/src/Calendar.tsx b/src/Calendar.tsx
index 91df123..4389cf7 100644
--- a/src/Calendar.tsx
+++ b/src/Calendar.tsx
@@ -41,7 +41,7 @@ function NormalDay({year, month, day, todayJDN}: DateProps & { todayJDN: number
     return <div className={`Day NormalDay ${jdn === todayJDN ? 'Day-today' : ''}`}>
         <div className="Day-name">{day}</div>
         <div className="Day-decade">{decadeNames[(day - 1) % 10]}</div>
-        <div className="Day-rural" title={rural.title}>{rural.name}</div>
+        <div className="Day-rural" title={rural.title} tabIndex={0}>{rural.name}</div>
         <DayDetail jdn={jdn}/>
     </div>;
 }