Added a tooltip on hovering version numbers. Will show details soon.

assets/main.coffee

@@ -25,3 +25,57 @@ document.addEventListener 'DOMContentLoaded', (event) ->
         activatePanel 'family-' + hash.substring 1
     else
         activatePanel 'family-keyone'
+
+    window.showTooltip = (event) ->
+        tt = document.querySelector('#tooltip')
+        tt_title = document.querySelector('#tooltip-title')
+        tt_text  = document.querySelector('#tooltip-text')
+
+        ref = event.target.parentNode.dataset.ref
+        ver = event.target.innerText
+
+        tt_title.innerHTML = ver
+        tt_text.innerHTML  = "for #{ref}"
+
+
+        # Show tooltip
+        tt.style.visibility = 'hidden'
+        tt.style.display = 'block'
+        positionTooltip event.clientX + window.scrollX, event.clientY + window.scrollY
+        tt.style.visibility = 'visible'
+
+    window.positionTooltip = (mouseX, mouseY) ->
+        tooltip = document.querySelector '#tooltip'
+
+        #pageHeight = document.documentElement.getBoundingClientRect().height
+        viewportBottom = document.documentElement.clientHeight + document.documentElement.scrollTop
+        viewportRight  = document.documentElement.clientWidth + document.documentElement.scrollLeft
+        cursorOffset = 20
+        tooltipHeight = tooltip.clientHeight
+        tooltipWidth  = tooltip.clientWidth
+
+        #console.log('Cursor: %o, Planned bottom: %o, Viewport bottom: %o', mouseY, mouseY+cursorOffset+tooltipHeight, viewportBottom)
+
+        # Check if tooltip is outside bottom of document
+        if mouseY + cursorOffset + tooltipHeight >= viewportBottom
+            # show tooltip ABOVE cursor
+            tooltip.style.top  = (mouseY - cursorOffset - tooltipHeight) + 'px'
+        else
+            # show tooltip below cursor
+            tooltip.style.top  = (mouseY + cursorOffset) + 'px'
+
+        if mouseX + cursorOffset + tooltipWidth >= viewportRight
+            # show tooltip LEFT of cursor
+            tooltip.style.left = (mouseX - cursorOffset - tooltipWidth) + 'px'
+        else
+            # show tooltip right of cursor
+            tooltip.style.left = (mouseX + cursorOffset) + 'px'
+
+    versionitems = document.querySelectorAll '.version'
+    for vi in versionitems
+        vi.addEventListener 'mousemove', (event) ->
+            positionTooltip event.clientX + window.scrollX, event.clientY + window.scrollY
+        vi.addEventListener 'mouseover', (event) ->
+            showTooltip event
+        vi.addEventListener 'mouseout', (event) ->
+            document.querySelector('#tooltip').style.display = 'none'

assets/style.css

@@ -15,17 +15,28 @@ body {
     margin-top: 70px;
 }
 
+#tooltip {
+    background-color: white;
+    z-index: 200;
+    position: absolute;
+    display: none;
+}
+
+#tooltip h1 {
+    font-weight: bold;
+}
+
 table td+td {
     border-left: 1px dashed silver;
     text-align: center;
 }
 
-td {
+th, td {
     font-family: monospace;
     white-space: nowrap;
 }
 
-td.ref {
+th.ref {
     font-weight: bold;
 }
 

index_main.php

@@ -64,22 +64,22 @@ foreach ($allVars as $family => $models) {
         $allVersions = $db->getAllVersionsForModel($model);
         echo '<table><tbody>';
         foreach ($variants as $ref => $name) {
-            echo '<tr><td class="ref">';
+            echo '<tr data-ref="' . $ref . '"><th class="ref">';
             if (mb_strlen($name) > 0) {
                 echo '<abbr title="' . $name . '">' . $ref . '</abbr>';
             } else {
                 echo $ref;
             }
-            echo '</td>';
+            echo '</th>';
             $refVersions = $db->getAllVersionsForRef($ref);
             $allOta      = $db->getAllVersionsForRef($ref, $db::OTA_ONLY);
             foreach ($allVersions as $v) {
                 if (in_array($v, $refVersions, true)) {
-                    if (in_array($v, $allOta)) {
-                        echo '<td>' . $v . '</td>';
-                    } else {
-                        echo '<td class="fullonly mdc-theme--secondary-dark">' . $v . '</td>';
+                    $moreClasses = '';
+                    if (!in_array($v, $allOta)) {
+                        $moreClasses = ' fullonly mdc-theme--secondary-dark';
                     }
+                    echo '<td class="version' . $moreClasses . '">' . $v . '</td>';
                 } else {
                     echo '<td class="empty">- - -</td>';
                 }
@@ -91,6 +91,14 @@ foreach ($allVars as $family => $models) {
     echo '</div>';
 }
 ?>
+    <div id="tooltip" class="mdc-card">
+      <section class="mdc-card__primary">
+        <h1 id="tooltip-title" class="mdc-card__title">Title</h1>
+      </section>
+      <section id ="tooltip-text" class="mdc-card__supporting-text">
+        Contents here.
+      </section>
+    </div>
   </main>
 </body>
 </html>