show tooltip when picts of UserPictureList are hovered

src/client/js/components/Common/UserPictureList.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
+import Tooltip from 'react-bootstrap/es/Tooltip';
+
 import UserPicture from '../User/UserPicture';
 
 export default class UserPictureList extends React.Component {
@@ -17,15 +20,23 @@ export default class UserPictureList extends React.Component {
 
     this.state = {
       users: users,
+      tooltipUsername: '',
     };
 
   }
 
   render() {
     const users = this.state.users.map(user => {
+      // create Tooltip
+      const tooltip = <Tooltip id={`tooltip-${user._id}`}>{user.username}</Tooltip>;
+
       return (
-        <a key={user._id} data-user-id={user._id} href={'/user/' + user.username} title={user.name}>
-          <UserPicture user={user} size="xs" />
+        <a key={user._id} data-user-id={user._id} href={'/user/' + user.username}>
+          <OverlayTrigger overlay={tooltip} placement='bottom'>
+            <span key={`span-${user._id}`}>{/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
+              <UserPicture user={user} size="xs" ref={`userPicture-${user._id}`} />
+            </span>
+          </OverlayTrigger>
         </a>
       );
     });