From 828ea88a17d52681841261326a396aea0d65acaf Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Thu, 11 Feb 2021 10:29:38 +0100
Subject: [PATCH] T137 tips section is displayed when condition is met

---
 .idea/workspace.xml                         |  1 -
 src/main/resources/static/js/uianimation.js | 36 +++++++++-------
 src/main/resources/templates/mock.html      | 48 +++++++++++----------
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f926a63..c3569b8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -20,7 +20,6 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/templates/mock.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/mock.html" afterDir="false" />
     </list>
diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index 8e78e27..9071cad 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -51,21 +51,25 @@ function showHeaders(){
     $('#headersTab').off('click');
 }
 
-$('#messageLink').mouseover(function(){$('#messageLinkTip').css('display', 'block')});
-$('#messageLink').mouseleave(function(){$('#messageLinkTip').css('display', 'none')});
-$('#httpStatus').mouseover(function(){$('#httpStatusTip').css('display', 'block')});
-$('#httpStatus').mouseleave(function(){$('#httpStatusTip').css('display', 'none')});
-$('#typeSelector').mouseover(function(){$('#typeSelectorTip').css('display', 'block')});
-$('#typeSelector').mouseleave(function(){$('#typeSelectorTip').css('display', 'none')});
-$('#bodyEditor').mouseover(function(){$('#bodyEditorTip').css('display', 'block')});
-$('#bodyEditor').mouseleave(function(){$('#bodyEditorTip').css('display', 'none')});
-$('#headersTab').mouseover(function(){$('#headersTabTip').css('display', 'block')});
-$('#headersTab').mouseleave(function(){$('#headersTabTip').css('display', 'none')});
-$('#historyTab').mouseover(function(){$('#historyTabTip').css('display', 'block')});
-$('#historyTab').mouseleave(function(){$('#historyTabTip').css('display', 'none')});
-$('#headerKeyInput').mouseover(function(){$('#newHeaderTip').css('display', 'block')});
-$('#headerKeyInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none')});
-$('#headerValueInput').mouseover(function(){$('#newHeaderTip').css('display', 'block')});
-$('#headerValueInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none')});
+function hidTip(){$('#toolTipContent').css('display', 'none');}
+
+function showTip(){$('#toolTipContent').css('display', 'block');}
+
+$('#messageLink').mouseover(function(){$('#messageLinkTip').css('display', 'block'); showTip();});
+$('#messageLink').mouseleave(function(){$('#messageLinkTip').css('display', 'none'); hidTip();});
+$('#httpStatus').mouseover(function(){$('#httpStatusTip').css('display', 'block'); showTip();});
+$('#httpStatus').mouseleave(function(){$('#httpStatusTip').css('display', 'none'); hidTip();});
+$('#typeSelector').mouseover(function(){$('#typeSelectorTip').css('display', 'block'); showTip();});
+$('#typeSelector').mouseleave(function(){$('#typeSelectorTip').css('display', 'none'); hidTip();});
+$('#bodyEditor').mouseover(function(){$('#bodyEditorTip').css('display', 'block'); showTip();});
+$('#bodyEditor').mouseleave(function(){$('#bodyEditorTip').css('display', 'none'); hidTip();});
+$('#headersTab').mouseover(function(){$('#headersTabTip').css('display', 'block'); showTip();});
+$('#headersTab').mouseleave(function(){$('#headersTabTip').css('display', 'none'); hidTip();});
+$('#historyTab').mouseover(function(){$('#historyTabTip').css('display', 'block'); showTip();});
+$('#historyTab').mouseleave(function(){$('#historyTabTip').css('display', 'none'); hidTip();});
+$('#headerKeyInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();});
+$('#headerKeyInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();});
+$('#headerValueInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();});
+$('#headerValueInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();});
 
 
diff --git a/src/main/resources/templates/mock.html b/src/main/resources/templates/mock.html
index aa53989..c476683 100644
--- a/src/main/resources/templates/mock.html
+++ b/src/main/resources/templates/mock.html
@@ -81,29 +81,31 @@
                 </div>
         </div>
         <div id="tooltip">
-            <div id="toolHeader"><h2>Tip:</h2></div>
-            <div>
-                <div id="messageLinkTip" class="collapsible">
-                    <!--style="display: none;"-->
-                    <p>It's url where you need send your request</p>
-                </div>
-                <div id="httpStatusTip" class="collapsible" style="display: none;">
-                    <p>Set http status for server response. 200 OK is default.</p>
-                </div>
-                <div id="typeSelectorTip" class="collapsible" style="display: none;">
-                    <p>Select content type of body. Set plain text if data has no format.</p>
-                </div>
-                <div id="bodyEditorTip" class="collapsible" style="display: none;">
-                    <p>Text placed in this field will be displayed as response body</p>
-                </div>
-                <div id="headersTabTip" class="collapsible" style="display: none;">
-                    <p>Set headers for your messages.</p>
-                </div>
-                <div id="historyTabTip" class="collapsible" style="display: none;">
-                    <p>Check history of this message</p>
-                </div>
-                <div id="newHeaderTip" class="collapsible" style="display: none;">
-                    <p>Type values and press enter to add new header.</p>
+            <div id="toolTipContent" style="display: none;">
+                <div id="toolHeader"><h2>Tip:</h2></div>
+                <div>
+                    <div id="messageLinkTip" class="collapsible" style="display: none;">
+                        <!--style="display: none;"-->
+                        <p>It's url where you need send your request</p>
+                    </div>
+                    <div id="httpStatusTip" class="collapsible" style="display: none;">
+                        <p>Set http status for server response. 200 OK is default.</p>
+                    </div>
+                    <div id="typeSelectorTip" class="collapsible" style="display: none;">
+                        <p>Select content type of body. Set plain text if data has no format.</p>
+                    </div>
+                    <div id="bodyEditorTip" class="collapsible" style="display: none;">
+                        <p>Text placed in this field will be displayed as response body</p>
+                    </div>
+                    <div id="headersTabTip" class="collapsible" style="display: none;">
+                        <p>Set headers for your messages.</p>
+                    </div>
+                    <div id="historyTabTip" class="collapsible" style="display: none;">
+                        <p>Check history of this message</p>
+                    </div>
+                    <div id="newHeaderTip" class="collapsible" style="display: none;">
+                        <p>Type values and press enter to add new header.</p>
+                    </div>
                 </div>
             </div>
         </div>