Added tooltips for new features

Backend/mocked-services/src/main/resources/static/html/mock.html

@@ -25,9 +25,10 @@
                             <span class="material-icons uuid-inputField-icon-span ">content_copy</span> 
                         </button>
                     </div>
+                    <div id="editableBlock">
                         <label for="editable">Editable</label>
                         <input type="checkbox" onchange="changeEditionOfUUID(this)" name="editable" id="editable" value="false"/>
-
+                    </div>
                         <div class="hiddable" id="uuid-validation-strategy">
                             <label style="margin-bottom: 1%;display: block;"> UUID generation strategy:</label>
                             <input type="radio" checked name="uuid-validation-type" value="new" id="generateNew"/>
@@ -217,6 +218,25 @@
                         <p>This button adds new message.</p>
                     </div>
                 </div>
+                <div class="large-vertical-margin">
+                    <div id="UUIDFieldTip" class="tip">
+                        <h3>UUID</h3>
+                        <p>UUID is an Unique ID that represents you in API. By UUID your messages is saved in database. You can change it to access your previous configuration of mocked messages</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="UUIDValidationStrategyTip" class="tip">
+                        <h3>UUID Checking Strategy</h3>
+                        <p>When you provide invalid UUID you can choose what do with it. You can generate new UUID or restore previous.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="UUIDEditionTip" class="tip">
+                        <h3>UUID Edition</h3>
+                        <p>Unlocks you ability to edit UUID</p>
+                    </div>
+                </div>
+
                 <div class="large-vertical-margin">
                     <div id="messagesTip" class="tip">
                         <h3>Message</h3>

Backend/mocked-services/src/main/resources/static/js/uianimation.js

@@ -124,11 +124,20 @@ $('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
 $('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
 
 $('#new-tile').mouseover(function(){showTip('btn-newTileTip');});
-$('#new-tile').focusin(function(){focusInTip('btn-newTileTip')});
+//$('#new-tile').focusin(function(){focusInTip('btn-newTileTip')});
 $('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')});
 $('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')});
 
 $('#listItems').mouseover(function(){showTip('messagesTip');});
-$('#listItems').focusin(function(){focusInTip('messagesTip')});
+//$('#listItems').focusin(function(){focusInTip('messagesTip')});
 $('#listItems').mouseleave(function(){hidTip('messagesTip')});
-$('#listItems').focusout(function(){focusOutTip('messagesTip')});
+//$('#listItems').focusout(function(){focusOutTip('messagesTip')});
+
+$('#uuid-flex-container').mouseover(function(){ showTip('UUIDFieldTip') });
+$('#uuid-flex-container').mouseleave(function(){ hidTip('UUIDFieldTip') });
+
+$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') });
+$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') });
+
+$('#editableBlock').mouseover( function(){ showTip('UUIDEditionTip') } );
+$('#editableBlock').mouseleave(function(){ hidTip('UUIDEditionTip') });