Merge pull request 'Added tooltip for button!' (#32) from widlam/bug/issue#12 into dev

Reviewed-on: R11/release11-tools-web#32

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

@@ -21,10 +21,7 @@
                     <!-- h2 -->
                     <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
                     <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
-                    <!-- save -->
+
-                    <div>
-                        <!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
-                    </div>
                     <!-- link -->
                     <div>
                         <label for="messageLink" class="block-display">Link</label>
@@ -58,7 +55,9 @@
                                 </datalist>
                             </div>
                         </div>
-                        <button id="btn-save" class="small-margins half-width with-padding action-button">Save</button>
+                        <div id="btnSave" class="small-margins half-width with-padding action-button" style="background-color: white; border: 0px;">
+                            <button id="btn-save" class="small-margins half-width with-padding action-button" style="width: 100%; height: 100%;">Save</button>
+                        </div>
                     </div>
                     <!-- body -->
                     <div class="small-vertical-margin">
@@ -184,6 +183,12 @@
                         <p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
                     </div>
                 </div>
+                <div class="large-vertical-margin">
+                    <div id="btnSaveTip" class="tip">
+                        <h3>Save button!</h3>
+                        <p>To save message, the message must be changed!</p>
+                    </div>
+                </div>
                 <div class="large-vertical-margin">
                     <div id="httpStatusTip" class="tip">
                         <h3>Http Status</h3>

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

@@ -114,3 +114,8 @@ $('#headerValueInput').mouseover(function(){showTip('newHeaderTip')});
 $('#headerValueInput').focusin(function(){focusInTip('newHeaderTip')});
 $('#headerValueInput').mouseleave(function(){hidTip('newHeaderTip')});
 $('#headerValueInput').focusout(function(){focusOutTip('newHeaderTip')});
+
+$('#btnSave').mouseover(function(){showTip('btnSaveTip');});
+$('#btnSave').focusin(function(){focusInTip('btnSaveTip')});
+$('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
+$('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});