Render peoplecard when hover user in DetailList?

[Americo Perez]

Hi,

I am creating a Web part that is using the DetailList component to render the Title column and a people column. 

I get the values of all columns and now I would like to show information about the user when the pointer is over his/her name. 

I wonder if there is peopleCard component or a combination of components that can do that. 

This is how the lis looks like: 

And this what I want to achieve: 

I doesn't need to be so complete, I mean, I don't need the Files part or the "update your profile".

This is my code until now: 

export default class PersonaApp extends React.Component<IPersonaAppProps, IPersonaAppState> { 
          constructor(props: IPersonaAppProps) {
               super(props);
               this.state = {
                     users: [],
                     name: '',
                    email: '',
                    phone: '',
                    image: null
              }
        }
       public componentDidMount(): void {
          this.props.provider.getAllUser().then((users: IUsers[]) => {
               this.setState({
                   users: users
               });
        });
     }

    private columns: IColumn[] = [
        {
            key: 'Title',
            name: 'Title',
            fieldName: 'Title',
            minWidth: 100,
            maxWidth: 100
      },
     {
          key: 'UserTitle',
          name: 'User Name',
         fieldName: 'UserTitle',
         minWidth: 100,
         maxWidth: 100
    },
]

public render(): React.ReactElement<IPersonaAppProps> {
     console.log(this.state.users)
    return (
         <div className={ styles.personaApp }>
              <div className={ styles.container }>
                  <div className={ styles.row }>
                       <div className={ styles.column }>
                            <DetailsList
                                 items={this.state.users}
                                 columns={this.columns}
                                 setKey="set"
                                layoutMode={DetailsListLayoutMode.justified}
                                isHeaderVisible={true}
                               selectionPreservedOnEmptyClick={true}
                               enterModalSelectionOnTouch={true}
                               ariaLabelForSelectionColumn="Toggle selection"
                               ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                        />
                </div>
          </div>
       </div>
    </div>
);
}
}

I am suspecting that I will need to use MSGraph to get the info of the user and here is my second question: 

I am using pnp to get the context of the web part like this:

public onInit(): Promise<void> {
     return super.onInit().then(_ => {
          pnpSetup({
                spfxContext: this.context
         });
        return Promise.resolve();
    });
}

 Bu I am not sure how to add MS graph in the onInit. 

Other alternative I found was to use the @pnp/graph but I don't know how to fetch the data of the user that has the mouse over event handler. 

As you can note, I don't have idea how to do all of this. 

Is there a guide to implement this peopleCard in DetailList? or is there som github sample code that do that? 

Best regards

Americo