diff --git a/script.js b/script.js
index 64a8418..0e1dfa4 100644
--- a/script.js
+++ b/script.js
@@ -740,7 +740,13 @@ function showEonstripDetail(index, startCob) {
while (occ < end && occ <= endCobEv) {
const relStart = (occ - start) / COBIE_UNITS.eonstrip;
const relEnd = (occ + duration - start) / COBIE_UNITS.eonstrip;
- events.push({ label: ev.label, start: relStart, end: relEnd });
+ events.push({
+ label: ev.label,
+ start: relStart,
+ end: relEnd,
+ cobStart: occ,
+ cobEnd: occ + duration
+ });
occ += interval;
}
});
@@ -782,6 +788,25 @@ function showEonstripDetail(index, startCob) {
} else {
elem.textContent = ev.label;
}
+
+ const tooltip = document.createElement('div');
+ tooltip.className = 'tooltip';
+ const opts = {
+ timeZone: currentTimezone === 'TAI' ? 'UTC' : currentTimezone,
+ year: 'numeric', month: 'short', day: 'numeric',
+ hour: '2-digit', minute: '2-digit', second: '2-digit',
+ hour12: false
+ };
+ const startStr = formatCobieTimestamp(ev.cobStart);
+ const endStr = formatCobieTimestamp(ev.cobEnd);
+ const startDate = fromCobiets(ev.cobStart).toLocaleString('en-US', opts);
+ const endDate = fromCobiets(ev.cobEnd).toLocaleString('en-US', opts);
+ tooltip.innerHTML =
+ `${ev.label}
` +
+ `Start: ${startStr}
` +
+ `End: ${endStr}
` +
+ `${startDate} – ${endDate}`;
+ elem.appendChild(tooltip);
timeline.appendChild(elem);
});
}
diff --git a/style.css b/style.css
index 4659434..537c125 100644
--- a/style.css
+++ b/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;