fix(component): add tooltips to show cut-off text in User Profile Component

[wahmd]

Description

• added tooltips to show complete text when hovering on email & names to fix text cut-off issue.
• imported & declared matToolTipModule to use inside user-profile component

What's included?

• Show the complete email using tooltip on hovering the displayed email in user-profile component.
• Show the complete name using tooltip on hovering the displayed namein user-profile component.

Test Steps

• npm run start
• Add a really long email or name to the user profile component demo
• Click on 'Open profile'
• Hover over the cut off email or name
• You can view the tooltip

Screenshot:

[owilliams320]

@wahmd can you include a screenshot? thanks!

[wahmd]

@owilliams320 updated the description with SS. Please review.

[owilliams320]

closes #1954

[wahmd]

@owilliams320 curious to know why this PR is not merged yet.

[owilliams320]

Hello @wahmd. Apologies for the delay. Spoke with our UX team. The desire is to have whole panel expand the width of the contents instead of showing a tooltip and cutting off with the ... If you would like to contribute we have a very similiar Issue flagged by our UX team for fit and finish of this user profile component. #1955