fixed issue with OAuth hint

lib/swagger-oauth.js

@@ -240,7 +240,7 @@ window.onOAuthComplete = function onOAuthComplete(token) {
       if(b){
         // if all roles are satisfied
         var o = null;
-        $.each($('.auth #api_information_panel'), function(k, v) {
+        $.each($('.auth .api-ic .api_information_panel'), function(k, v) {
           var children = v;
           if(children && children.childNodes) {
             var requiredScopes = [];
@@ -257,7 +257,7 @@ window.onOAuthComplete = function onOAuthComplete(token) {
               }
             }
             if(diff.length > 0){
-              o = v.parentNode;
+              o = v.parentNode.parentNode;
               $(o.parentNode).find('.api-ic.ic-on').addClass('ic-off');
               $(o.parentNode).find('.api-ic.ic-on').removeClass('ic-on');
 
@@ -266,7 +266,7 @@ window.onOAuthComplete = function onOAuthComplete(token) {
               $(o).find('.api-ic').removeClass('ic-error');
             }
             else {
-              o = v.parentNode;
+              o = v.parentNode.parentNode;
               $(o.parentNode).find('.api-ic.ic-off').addClass('ic-on');
               $(o.parentNode).find('.api-ic.ic-off').removeClass('ic-off');
 

src/main/html/css/screen.css

@@ -1155,8 +1155,16 @@
 .swagger-section .auth {
   float: right;
 }
-.swagger-section #api_information_panel {
-  position: absolute;
+.swagger-section .api-ic {
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../images/explorer_icons.png) no-repeat;
+}
+.swagger-section .api-ic .api_information_panel {
+  position: relative;
+  margin-top: 20px;
+  margin-left: -5px;
   background: #FFF;
   border: 1px solid #ccc;
   border-radius: 5px;
@@ -1167,34 +1175,32 @@
   color: black;
   padding: 5px;
 }
-.swagger-section #api_information_panel p .api-msg-enabled {
+.swagger-section .api-ic .api_information_panel p .api-msg-enabled {
   color: green;
 }
-.swagger-section #api_information_panel p .api-msg-disabled {
+.swagger-section .api-ic .api_information_panel p .api-msg-disabled {
   color: red;
 }
-.swagger-section .api-ic {
-  height: 18px;
-  vertical-align: middle;
-  display: inline-block;
-  background: url(../images/explorer_icons.png) no-repeat;
+.swagger-section .api-ic:hover .api_information_panel {
+  position: absolute;
+  display: block;
 }
 .swagger-section .ic-info {
   background-position: 0 0;
   width: 18px;
-  margin-top: -7px;
+  margin-top: -6px;
   margin-left: 4px;
 }
 .swagger-section .ic-warning {
   background-position: -60px 0;
   width: 18px;
-  margin-top: -7px;
+  margin-top: -6px;
   margin-left: 4px;
 }
 .swagger-section .ic-error {
   background-position: -30px 0;
   width: 18px;
-  margin-top: -7px;
+  margin-top: -6px;
   margin-left: 4px;
 }
 .swagger-section .ic-off {

src/main/javascript/view/OperationView.js

@@ -33,7 +33,7 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
           range.moveToElementText(text);
           range.select();
       } else if (window.getSelection) {
-          selection = window.getSelection();        
+          selection = window.getSelection();
           range = document.createRange();
           range.selectNodeContents(text);
           selection.removeAllRanges();
@@ -72,11 +72,11 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
     pos.top = y;
     pos.left = x;
     elem.css(pos);
-    $(e.currentTarget.parentNode).find('#api_information_panel').show();
+    // $(e.currentTarget.parentNode).find('#api_information_panel').show();
   },
 
   mouseExit: function(e) {
-    $(e.currentTarget.parentNode).find('#api_information_panel').hide();
+    // $(e.currentTarget.parentNode).find('#api_information_panel').hide();
   },
 
   // Note: copied from CoffeeScript compiled file

src/main/less/screen.less

@@ -12,50 +12,58 @@
     float: right;
 }
 
-#api_information_panel {
-    position: absolute;
-    background: #FFF;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    display: none;
-    font-size: 13px;
-    max-width: 300px;
-    line-height: 30px;
-    color: black;
-    padding: 5px;
-    p {
-        .api-msg-enabled {
-            color: green;
-        }
-        .api-msg-disabled {
-            color: red;
-        }
-    }
-}
-
 .api-ic {
     height: 18px;
     vertical-align: middle;
     display: inline-block;
     background: url(../images/explorer_icons.png) no-repeat;
+    .api_information_panel {
+        position: relative;
+        margin-top: 20px;
+        margin-left: -5px;
+        background: #FFF;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        display: none;
+        font-size: 13px;
+        max-width: 300px;
+        line-height: 30px;
+        color: black;
+        padding: 5px;
+        p {
+            .api-msg-enabled {
+                color: green;
+            }
+            .api-msg-disabled {
+                color: red;
+            }
+        }
+    }
+}
+
+.api-ic:hover {
+    .api_information_panel {
+        position: absolute;
+        display: block;
+    }
 }
 
 .ic-info {
     background-position: 0 0;
     width: 18px;
-    margin-top: -7px;
+    margin-top: -6px;
     margin-left: 4px;
 }
 .ic-warning {
     background-position: -60px 0;
     width: 18px;
-    margin-top: -7px;
+    margin-top: -6px;
     margin-left: 4px;
 }
 .ic-error {
     background-position: -30px 0;
     width: 18px;
-    margin-top: -7px;
+    margin-top: -6px;
     margin-left: 4px;
 }
 .ic-off {
@@ -136,4 +144,4 @@
     padding-top: 10px;
 }
 
-}
+}

src/main/template/operation.handlebars

@@ -26,15 +26,15 @@
         {{/if}}
         {{#oauth}}
         <div class="auth">
-        <span class="api-ic ic-error"></span>{{/oauth}}
+        <span class="api-ic ic-error">{{/oauth}}
         {{#each oauth}}
-          <div id="api_information_panel" style="top: 526px; left: 776px; display: none;">
+          <div class="api_information_panel">
           {{#each this}}
             <div title='{{{this.description}}}'>{{this.scope}}</div>
           {{/each}}
           </div>
         {{/each}}
-        {{#oauth}}</div>{{/oauth}}
+        {{#oauth}}</span></div>{{/oauth}}
         {{#oauth}}
         <div class='access'>
           <span class="api-ic ic-off" title="click to authenticate"></span>