Add tooltip visibility timeout (#22)

static/css/components.css

@@ -256,7 +256,8 @@
     }
 
     .article-tooltip {
-        display: none;
+        visibility: hidden;
+        transition: visibility 0.1s;
         width: 100%;
         position: absolute;
         bottom: 25px;
@@ -272,7 +273,7 @@
     }
 
         .article:hover > .article-tooltip {
-            display: block;
+            visibility: visible;
         }
 
         .article-tooltip-image {

static/js/main.js

@@ -20,9 +20,7 @@ function initializeThemeSwitcher() {
 function hideTooltip() {
     let visibleTooltips = document.querySelectorAll(".article-tooltip");
     for (let i = 0; i < visibleTooltips.length; i++) {
-        if (visibleTooltips[i].style.display !== "none") {
-            visibleTooltips[i].style.display = null;
-        }
+        visibleTooltips[i].style.visibility = null;
     }
 }
 
@@ -39,13 +37,14 @@ function addWeirdLogicThatSomeGeeksWillUseOnceAndForget() {
 
         if (e.keyCode == 81) {
             tooltip = document.activeElement.parentNode.parentNode.querySelector('.article-tooltip');
-            if (tooltip.style.display == "block") {
-                tooltip.style.display = null;
+            if (tooltip.style.visibility == "visible") {
+                tooltip.style.visibility = null;
             } else {
-                tooltip.style.display = "block";
+                tooltip.style.visibility = "visible";
             }
         }
 
+
         if (e.keyCode == 9) {
             hideTooltip();
         }