T190 tooltip added

src/main/resources/static/css/main.css

@@ -1,5 +1,5 @@
 #container {
-    width: 1330px;
+    width: 1400px;
     margin-left: auto;
     margin-right: auto;
     min-height: 1900px;
@@ -235,6 +235,13 @@
 
 }
 
+#mockIntroTip {
+    margin-top: 10px;
+    text-align: justify;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
 .btn-function-table {
     font-size: 24px;
     font-weight: 700;
@@ -259,3 +266,4 @@
     color:indianred;
 }
 
+

src/main/resources/static/css/tooltip.css

@@ -0,0 +1,49 @@
+p#tooltipText {
+    /* /* padding: 20px;  */
+    width: 200px;
+    height: 150px;
+}
+
+div#tooltip {
+    border-radius: 15px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    margin-top: 20px;
+    border: 2px solid rgba(155, 165, 160, 0.507);
+    width: 350px;
+    /* width: 70%; */
+    /* background-color: rgb(68, 158, 116); */
+    min-height: 591px;
+}
+
+.collapsible {
+    /*background-color: rgba(155, 165, 160, 0.507);*/
+    color: rgb(44, 44, 44);
+    cursor: pointer;
+    padding: 5px;
+    width: 100%;
+    /*border: none;*/
+    /*outline: none;*/
+    /*max-height: 0;*/
+    /*overflow: hidden;*/
+    /*transition: max-height 0.2s ease-out;*/
+}
+
+/*.active, .collapsibleActive:hover {*/
+/*    background-color: rgb(85, 85, 85);*/
+/*}*/
+
+.collapsibleData {
+    padding: 0 18px;
+
+    background-color: #f1f1f1;
+}
+
+.fixed {
+    position: fixed;
+    /*top: 50%;*/
+    left: 50%;
+    margin-top: 150px;
+    margin-left: 300px;
+}

src/main/resources/static/js/uianimation.js

@@ -51,24 +51,35 @@ function showHeaders(){
     $('#headersTab').off('click');
 }
 
-function hidTip(){$('#toolTipContent').css('display', 'none');}
+function hidTip(){
+    // $('#toolTipContent').css('display', 'none');
+}
 
-function showTip(){$('#toolTipContent').css('display', 'block');}
+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();});