RE

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

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 // import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
 // import Tooltip from 'react-bootstrap/es/Tooltip';
 
+import { Tooltip, Button } from 'reactstrap';
+
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
@@ -31,14 +33,26 @@ class UserPictureList extends React.Component {
   render() {
     const users = this.state.users.map((user) => {
       // create Tooltip
-      const tooltip = <Tooltip id={`tooltip-${user._id}`}>@{user.username}<br />{user.name}</Tooltip>;
+      // const tooltip = <Tooltip id={`tooltip-${user._id}`}>@{user.username}<br />{user.name}</Tooltip>;
+
+      const [tooltipOpen, setTooltipOpen] = this.props;
+      const toggle = () => setTooltipOpen(!tooltipOpen);
 
       return (
-        <OverlayTrigger key={user._id} overlay={tooltip} placement="bottom">
-          <span key={`span-${user._id}`}>{/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
+        <span>
+          <Button id={`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>
+          </Button>
+          <Tooltip
+            id={`tooltip-${user._id}`}
+            placement="bottom"
+            isOpen={tooltipOpen}
+            target={`span-${user._id}`}
+            toggle={toggle}
+          >
+            @{user.username}<br />{user.name}
+          </Tooltip>
+        </span>
       );
     });