Web:Components:Avatar: add tooltip on hover role icon

packages/components/avatar/avatar.stories.js

@@ -38,6 +38,8 @@ Default.args = {
   userName: "",
   editing: false,
   hideRoleIcon: false,
+  tooltipContent: "",
+  withTooltip: false,
 };
 
 Picture.args = {
@@ -48,6 +50,8 @@ Picture.args = {
   userName: "",
   editing: false,
   hideRoleIcon: false,
+  tooltipContent: "",
+  withTooltip: false,
 };
 
 Initials.args = {
@@ -57,6 +61,8 @@ Initials.args = {
   userName: "John Doe",
   editing: false,
   hideRoleIcon: false,
+  tooltipContent: "",
+  withTooltip: false,
 };
 
 Icon.args = {
@@ -66,4 +72,6 @@ Icon.args = {
   userName: "",
   editing: false,
   hideRoleIcon: false,
+  tooltipContent: "",
+  withTooltip: false,
 };

packages/components/avatar/index.js

@@ -17,6 +17,9 @@ import {
 import IconButton from "../icon-button";
 import commonIconsStyles from "../utils/common-icons-style";
 
+import Text from "../text";
+import Tooltip from "../tooltip";
+
 const StyledGuestIcon = styled(GuestReactSvg)`
   ${commonIconsStyles}
 `;
@@ -63,6 +66,8 @@ const Avatar = (props) => {
     editAction,
     isDefaultSource = false,
     hideRoleIcon,
+    tooltipContent,
+    withTooltip,
   } = props;
   let isDefault = false,
     isIcon = false;
@@ -104,7 +109,27 @@ const Avatar = (props) => {
         </EditContainer>
       ) : (
         <>
-          {!hideRoleIcon && <RoleWrapper size={size}>{roleIcon}</RoleWrapper>}
+          {!hideRoleIcon && (
+            <>
+              <RoleWrapper
+                size={size}
+                data-for="roleTooltip"
+                data-tip={tooltipContent}
+              >
+                {roleIcon}
+              </RoleWrapper>
+              {withTooltip && (
+                <Tooltip
+                  id="roleTooltip"
+                  getContent={(dataTip) => (
+                    <Text fontSize="12px">{dataTip}</Text>
+                  )}
+                  effect="float"
+                  place="right"
+                />
+              )}
+            </>
+          )}
         </>
       )}
     </StyledAvatar>
@@ -141,6 +166,10 @@ Avatar.propTypes = {
   id: PropTypes.string,
   /** Accepts css style  */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Show tooltip on hover role icon */
+  withTooltip: PropTypes.bool,
+  /** Tooltip content */
+  tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };
 
 Avatar.defaultProps = {
@@ -150,6 +179,8 @@ Avatar.defaultProps = {
   userName: "",
   editing: false,
   hideRoleIcon: false,
+  withTooltip: false,
+  tooltipContent: "",
 };
 
 export default memo(Avatar);