Improve event labels and tooltips

style.css

@@ -411,6 +411,8 @@
   position: absolute;
   left: -40px;
   width: calc(100% + 40px);
+  text-align: right;
+  padding-right: 4px;
   border-top: 1px dashed rgba(0,255,255,0.5);
   color: #00ffff;
   font-size: 0.9em;
@@ -463,10 +465,10 @@
 .event-line .event-label,
 .event-box.small-event .event-label {
   position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 4px;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -2px);
+  margin-bottom: 2px;
   background: rgba(255,0,255,0.5);
   border: 1px solid rgba(0,255,255,0.8);
   border-radius: 4px;
@@ -479,6 +481,11 @@
   z-index: 4;
 }
 
+.event-box:hover .tooltip,
+.event-line:hover .tooltip {
+  opacity: 1;
+}
+
 /* Layout combining current time and analog clock */
 .time-display {
   --clock-size: 40vmin;