updating toggle to take person uuid instead of bool

frontend/src/components/people-list/person-status.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const Styled = require('styled-components');
 
+const Tooltip = require('@ui/components/tooltip');
 const fns = require('@ui/shared/functions');
 const composers = require('@ui/shared/composers');
 
@@ -35,23 +36,56 @@ const StyledWrapper = styled.div`
   }
 `;
 
+const arrowPosition = {
+  bottom: '100%',
+  right: '10%'
+};
+
+const tooltipStyle = {
+  position: 'absolute',
+  top: 0,
+  'z-index': 1
+};
+
+const PlainButton = styled.button`
+  background: transparent;
+  font-size: inherit;
+  border: none;
+  z-index: 0;
+  font-family: inherit;
+  color: inherit;
+`;
+
+const tooltip = (person) => (
+  <Tooltip
+    arrowPosition={arrowPosition}
+    key={person.uuid}
+    style={tooltipStyle}
+  >
+    <li>Admin</li>
+    <li>Read Only</li>
+    <li>Unassigned</li>
+  </Tooltip>
+);
+
 const PersonStatus = (props) => {
 
   const {
-    toggled,
+    toggledID,
     person,
     handleStatusTooltip
   } = props;
 
+  const toggled = toggledID;
+  const handleClick = () => handleStatusTooltip(person.uuid);
+
   return (
     <StyledWrapper toggled={toggled}>
-      <a
-        onClick={handleStatusTooltip}
-        role="tooltip"
-        tabIndex="0"
-      >
+      <PlainButton onClick={handleClick} >
         {person.status}
-      </a>
+      </PlainButton>
+
+      {toggledID === person.uuid ? tooltip(person) : null}
     </StyledWrapper>
   );
 };
@@ -59,7 +93,7 @@ const PersonStatus = (props) => {
 PersonStatus.propTypes = {
   handleStatusTooltip: React.PropTypes.func,
   person: React.PropTypes.object,
-  toggled: React.PropTypes.bool,
+  toggledID: React.PropTypes.string,
 };
 
 module.exports = PersonStatus;

frontend/src/components/people-list/table.js

@@ -36,7 +36,7 @@ const PeopleTable = (props) => {
       <PersonStatus
         handleStatusTooltip={handleStatusTooltip}
         person={person}
-        toggled={orgUI.member_role_tooltip}
+        toggledID={orgUI.member_role_tooltip}
       />
     );
 

frontend/src/containers/org/people.js

@@ -39,7 +39,7 @@ const mapStateToProps = (state, {
 
 const mapDispatchToProps = (dispatch) => ({
   handleToggle: () => dispatch(handleInviteToggle()),
-  handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
+  handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id))
 });
 
 module.exports = connect(

frontend/src/state/reducers/orgs.js

@@ -26,7 +26,8 @@ module.exports = handleActions({
       ...state,
       ui: {
         ...state.ui,
-        member_role_tooltip: !state.ui.member_role_tooltip
+        member_role_tooltip:
+          action.payload === state.ui.member_role_tooltip ? '' : action.payload
       }
     };
   }