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;