Refine popover functionality, add input secret style

awx/ui/client/lib/components/popover/_index.less

@@ -1,7 +1,13 @@
+.at-Popover {
+    margin-top: 2px;
+    padding: 0 0 0 @at-space-3x;
+    line-height: @at-line-height-short;
+}
+
 .at-Popover-icon {
     .at-mixin-ButtonIcon();  
     font-size: @at-font-size-3x;
-    padding: 0 0 0 @at-space-2x;
+    padding: 0;
     margin: 0;
 }
 
@@ -29,3 +35,15 @@
     padding: 0;
     margin: -@at-space 0 0 0;
 }
+
+.at-Popover-title {
+    .at-mixin-Heading(@at-font-size-2x);
+    color: @at-white;
+    margin-bottom: @at-space-3x;
+}
+
+.at-Popover-text {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+}

awx/ui/client/lib/components/popover/popover.directive.js

@@ -23,6 +23,10 @@ function AtPopoverController () {
         return event => {
             event.stopPropagation();
 
+            if (vm.isClickWithinPopover(event, popover)) {
+                return;
+            }
+
             vm.open = false;
 
             popover.style.visibility = 'hidden';
@@ -33,6 +37,19 @@ function AtPopoverController () {
         };
     };
 
+    vm.isClickWithinPopover = (event, popover) => {
+        let box = popover.getBoundingClientRect();
+
+        let x = event.clientX;
+        let y = event.clientY;
+
+        if ((x <= box.right && x >= box.left) && (y >= box.top && y <= box.bottom)) {
+            return true;
+        }
+
+        return false;
+    };
+
     vm.createDisplayListener = () => {
         return event => {
             if (vm.open) {

awx/ui/client/lib/components/popover/popover.partial.html

@@ -6,6 +6,9 @@
         <div class="at-Popover-arrow">
             <i class="fa fa-caret-left fa-2x"></i>
         </div>
-        <div class="at-Popover-content">{{::state.help_text}}</div>
+        <div class="at-Popover-content">
+            <h4 class="at-Popover-title">{{::state.label}}</h4>
+            <p class="at-Popover-text">{{::state.help_text}}</p>
+        </div>
     </div>
 </div>