Adds tooltip to username and help icon.

src/app.scss

@@ -6,7 +6,6 @@
 //
 // masthead overrides
 //
-
 .pf-c-page__header-brand {
   max-width: 255px;
 }
@@ -291,3 +290,4 @@
     margin-right: 20px;
   }
 }
+

src/components/PageHeaderToolbar.jsx

@@ -11,6 +11,7 @@ import {
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
+  Tooltip
 } from '@patternfly/react-core';
 import {
   QuestionCircleIcon,
@@ -22,7 +23,10 @@ const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/in
 class PageHeaderToolbar extends Component {
   constructor (props) {
     super(props);
-    this.state = { isHelpOpen: false, isUserOpen: false };
+    this.state = {
+      isHelpOpen: false,
+      isUserOpen: false,
+    };
 
     this.onHelpSelect = this.onHelpSelect.bind(this);
     this.onHelpToggle = this.onHelpToggle.bind(this);
@@ -54,24 +58,33 @@ class PageHeaderToolbar extends Component {
     const { isHelpOpen, isUserOpen } = this.state;
     const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
 
-    const dropdownIconColor = {
-      color: 'white'
-    };
+    // const dropdownIconColor = {
+    //   color: 'white'
+    // };
 
     return (
       <I18n>
         {({ i18n }) => (
           <Toolbar>
             <ToolbarGroup>
+              <Tooltip
+                position="left"
+                entryDelay={0}
+                exitDelay={0}
+                content={
+                  <div>Help</div>
+                }
+              >
                 <ToolbarItem>
                   <Dropdown
+                    isPlain
                     isOpen={isHelpOpen}
                     position={DropdownPosition.right}
                     onSelect={this.onHelpSelect}
                     toggle={(
                       <DropdownToggle
                         onToggle={this.onHelpToggle}
-                      style={dropdownIconColor}
+                        // style={dropdownIconColor}
                       >
                         <QuestionCircleIcon />
                       </DropdownToggle>
@@ -95,17 +108,28 @@ class PageHeaderToolbar extends Component {
                     ]}
                   />
                 </ToolbarItem>
+              </Tooltip>
+              <Tooltip
+                position="left"
+                entryDelay={0}
+                exitDelay={0}
+                content={
+                  <div>User</div>
+                }
+              >
                 <ToolbarItem>
                   <Dropdown
+                    isPlain
                     isOpen={isUserOpen}
                     position={DropdownPosition.right}
                     onSelect={this.onUserSelect}
                     toggle={(
                       <DropdownToggle
                         onToggle={this.onUserToggle}
-                      style={dropdownIconColor}
+                        // style={dropdownIconColor}
                       >
                         <UserIcon />
+                        &nbsp; User Name
                       </DropdownToggle>
                     )}
                     dropdownItems={[
@@ -125,6 +149,7 @@ class PageHeaderToolbar extends Component {
                     ]}
                   />
                 </ToolbarItem>
+              </Tooltip>
             </ToolbarGroup>
           </Toolbar>
         )}