Implement mobile tooltips

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;

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>;
 }