diff --git a/packages/components/avatar/avatar.stories.js b/packages/components/avatar/avatar.stories.js
index 9dc443e502..b440805035 100644
--- a/packages/components/avatar/avatar.stories.js
+++ b/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,
};
diff --git a/packages/components/avatar/index.js b/packages/components/avatar/index.js
index b0da35fc42..36403a1f80 100644
--- a/packages/components/avatar/index.js
+++ b/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) => {
) : (
<>
- {!hideRoleIcon && {roleIcon}}
+ {!hideRoleIcon && (
+ <>
+
+ {roleIcon}
+
+ {withTooltip && (
+ (
+ {dataTip}
+ )}
+ effect="float"
+ place="right"
+ />
+ )}
+ >
+ )}
>
)}
@@ -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);