update

frontend/src/components/dirent-detail/detail-list-view.js

@@ -149,6 +149,7 @@ class DetailListView extends React.Component {
                       participants={fileParticipantList}
                       repoID={this.props.repoID}
                       filePath={direntPath}
+                      showIconTip={false}
                     />
                   }
                 </td>

frontend/src/components/file-view/comment-panel.js

@@ -135,6 +135,7 @@ class CommentPanel extends React.Component {
               participants={participants}
               repoID={repoID}
               filePath={filePath}
+              showIconTip={true}
             />
           }
           <textarea

frontend/src/components/file-view/participants-list.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Tooltip } from 'reactstrap';
 import ModalPortal from '../modal-portal';
 import FileParticipantDialog from '../dialog/file-participant-dialog';
-import { serviceURL } from '../../utils/constants';
+import { serviceURL, gettext } from '../../utils/constants';
 import '../../css/participants-list.css';
 
 const propTypes = {
@@ -10,6 +11,7 @@ const propTypes = {
   participants: PropTypes.array.isRequired,
   repoID: PropTypes.string.isRequired,
   filePath: PropTypes.string.isRequired,
+  showIconTip: PropTypes.bool.isRequired,
 };
 
 class ParticipantsList extends React.Component {
@@ -18,6 +20,7 @@ class ParticipantsList extends React.Component {
     super(props);
     this.state = {
       showDialog : false,
+      tooltipOpen: false,
     };
   }
 
@@ -25,16 +28,25 @@ class ParticipantsList extends React.Component {
     this.setState({ showDialog: !this.state.showDialog });
   }
 
+  tooltipToggle = () => {
+    this.setState({ tooltipOpen: !this.state.tooltipOpen });
+  }
+
   render() {
-    const { participants, repoID, filePath } = this.props;
+    const { participants, repoID, filePath, showIconTip } = this.props;
     return (
       <div className="participants mb-2 position-relative">
         {participants.map((item, index) => {
           return <img src={serviceURL + item.avatar_url} className="avatar" alt="avatar" key={index} style={{left: index * -7 + 'px'}}/>;
         })}
-        <span className="add-participants" style={{left: participants.length * 21, top: 8 }} onClick={this.toggleDialog}>
+        <span className="add-participants" style={{left: participants.length * 21, top: 8 }} onClick={this.toggleDialog} id="add-participant-icon">
           <i className="fas fa-plus-circle"></i>
         </span>
+        {showIconTip &&
+          <Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target="add-participant-icon" placement='bottom' isOpen={this.state.tooltipOpen}>
+            {gettext('Add participants')}
+          </Tooltip>
+        }
         {this.state.showDialog &&
           <ModalPortal>
             <FileParticipantDialog