Add side nav panel tooltips

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

@@ -91,25 +91,33 @@
         overflow-y: auto;
         max-height: 100vh;
         min-width: @at-width-collapsed-side-nav;
+        z-index: @at-z-index-side-nav;
 
         .at-Layout-sideNavItem {
             display: flex;
             cursor: pointer;
 
-            i {
-                font-size: @at-height-side-nav-item-icon;
-                padding: @at-padding-side-nav-item-icon;
-            }
-
-            &:hover,
-            &.is-active {
-                background: @at-color-side-nav-item-background-hover;
-                border-left: @at-highlight-left-border-size solid @at-color-side-nav-item-border-hover;
+                > i.fa {
+                    padding-left: 20px;
+                }
 
                 i {
-                    margin-left: @at-highlight-left-border-margin-makeup;
+                    cursor: pointer;
+                    color: @at-color-side-nav-content;
+                    font-size: @at-height-side-nav-item-icon;
+                    padding: @at-padding-side-nav-item-icon;
+                }
+
+                &:hover,
+                &.is-active {
+                    background: @at-color-side-nav-item-background-hover;
+                    border-left: @at-highlight-left-border-size solid @at-color-side-nav-item-border-hover;
+
+                    i {
+                        color: @at-color-side-nav-content;
+                        margin-left: @at-highlight-left-border-margin-makeup;
+                    }
                 }
-            }
         }
 
         .at-Layout-sideNavSpacer {

awx/ui/client/lib/components/layout/side-nav-item.directive.js

@@ -7,7 +7,7 @@ function atSideNavItemLink (scope, element, attrs, ctrl) {
 
 function AtSideNavItemController ($state, $scope) {
     let vm = this || {};
-
+    vm.popoverText = $scope.name.replace(/_/g,' ');
     $scope.$watch('layoutVm.currentState', function(current) {
         if ($scope.name === 'portal mode') {
             vm.isRoute = (current && current.indexOf('portalMode') === 0);
@@ -27,6 +27,16 @@ function AtSideNavItemController ($state, $scope) {
     vm.go = function() {
         $state.go($scope.route, {}, {reload: true});
     }
+
+    vm.tooltip = {
+        popover: {
+            text: vm.popoverText,
+            on: 'mouseenter',
+            icon: $scope.iconClass,
+            position: 'right',
+            arrowHeight: 18
+        }
+    }
 }
 
 AtSideNavItemController.$inject = ['$state', '$scope'];

awx/ui/client/lib/components/layout/side-nav-item.partial.html

@@ -1,8 +1,10 @@
 <div class="at-Layout-sideNavItem" ng-click="vm.go()" ng-class="{'is-active': vm.isRoute}"
     ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn &&
         !layoutVm.licenseIsMissing">
-            <i class="fa {{ iconClass }}"></i>
-            <span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
-                {{ layoutVm.getString(name) }}
-            </span>
+        <at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
+
+        <i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i>
+        <span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
+            {{ layoutVm.getString(name) }}
+        </span>
 </div>

awx/ui/client/lib/components/layout/side-nav.directive.js

@@ -7,7 +7,7 @@ function atSideNavLink (scope, element, attrs, ctrl) {
 function AtSideNavController () {
     let vm = this || {};
 
-    vm.isExpanded = true;
+    vm.isExpanded = false;
 
     vm.toggleExpansion = () => {
         vm.isExpanded = !vm.isExpanded;