diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 78f1410..f926a63 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -20,9 +20,8 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/main/resources/static/css/wojtas.css" afterDir="false" />
       <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/css/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/css/main.css" 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>
     <option name="SHOW_DIALOG" value="false" />
diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index b1ba1b5..8e78e27 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -51,4 +51,21 @@ 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')});
+
 
diff --git a/src/main/resources/templates/mock.html b/src/main/resources/templates/mock.html
index ae9988c..aa53989 100644
--- a/src/main/resources/templates/mock.html
+++ b/src/main/resources/templates/mock.html
@@ -96,10 +96,10 @@
                 <div id="bodyEditorTip" class="collapsible" style="display: none;">
                     <p>Text placed in this field will be displayed as response body</p>
                 </div>
-                <div id="headersTip" class="collapsible" style="display: none;">
+                <div id="headersTabTip" class="collapsible" style="display: none;">
                     <p>Set headers for your messages.</p>
                 </div>
-                <div id="historyTip" class="collapsible" style="display: none;">
+                <div id="historyTabTip" class="collapsible" style="display: none;">
                     <p>Check history of this message</p>
                 </div>
                 <div id="newHeaderTip" class="collapsible" style="display: none;">