From f202fafb19c7078a8defc442e4e21b8b25e60d1a Mon Sep 17 00:00:00 2001
From: Vasiliy <vasya-1995@mail.ru>
Date: Wed, 4 Mar 2020 13:36:22 +0300
Subject: [PATCH] Add tooltip visibility timeout (#22)

---
 static/css/components.css |  5 +++--
 static/js/main.js         | 11 +++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/static/css/components.css b/static/css/components.css
index e8c0a7a..8706cdd 100644
--- a/static/css/components.css
+++ b/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 {
diff --git a/static/js/main.js b/static/js/main.js
index c68408a..912d7ba 100644
--- a/static/js/main.js
+++ b/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();
         }