change method name and add tooltips

src/client/js/components/Page/EditTagModal.jsx

@@ -13,13 +13,13 @@ export default class EditTagModal extends React.Component {
     this.state = {
       pageTags: [],
       newPageTags: [],
-      isOpenEditTagModal: false,
+      isOpenModal: false,
     };
 
     this.updateTags = this.updateTags.bind(this);
-    this.handleShowEditTagModal = this.handleShowEditTagModal.bind(this);
-    this.handleCloseEditTagModal = this.handleCloseEditTagModal.bind(this);
-    this.handleSubmitEditTagModal = this.handleSubmitEditTagModal.bind(this);
+    this.handleShowModal = this.handleShowModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   async componentWillMount() {
@@ -35,18 +35,18 @@ export default class EditTagModal extends React.Component {
     this.setState({ newPageTags });
   }
 
-  handleCloseEditTagModal() {
-    this.setState({ isOpenEditTagModal: false });
+  handleCloseModal() {
+    this.setState({ isOpenModal: false });
   }
 
-  handleShowEditTagModal() {
-    this.setState({ isOpenEditTagModal: true });
+  handleShowModal() {
+    this.setState({ isOpenModal: true });
   }
 
-  handleSubmitEditTagModal() {
+  handleSubmit() {
     try {
       this.props.crowi.apiPost('/pages.updateTags', { pageId: this.props.pageId, newTags: this.state.newPageTags });
-      this.setState({ pageTags: this.state.newPageTags, isOpenEditTagModal: false });
+      this.setState({ pageTags: this.state.newPageTags, isOpenModal: false });
       toastr.success(undefined, 'Updated tags successfully', {
         closeButton: true,
         progressBar: true,
@@ -75,13 +75,18 @@ export default class EditTagModal extends React.Component {
       <span className="btn-tag-container">
         <Button
           variant="primary"
-          onClick={this.handleShowEditTagModal}
+          onClick={this.handleShowModal}
           className="btn btn-default btn-tag"
           style={this.props.style}
+          data-toggle="tooltip"
+          data-placement="bottom"
+          title={this.state.pageTags.map((tag) => {
+            return `#${tag}`;
+          })}
         >
           <i className="fa fa-tags"></i>{this.state.pageTags.length}
         </Button>
-        <Modal show={this.state.isOpenEditTagModal} onHide={this.handleCloseEditTagModal} id="editTagModal">
+        <Modal show={this.state.isOpenModal} onHide={this.handleCloseModal} id="editTagModal">
           <Modal.Header closeButton className="bg-primary">
             <Modal.Title className="text-white">ページタグ</Modal.Title>
           </Modal.Header>
@@ -89,7 +94,7 @@ export default class EditTagModal extends React.Component {
             <PageTagForm crowi={this.props.crowi} defaultPageTags={this.state.pageTags} updateTags={this.updateTags} />
           </Modal.Body>
           <Modal.Footer>
-            <Button variant="primary" onClick={this.handleSubmitEditTagModal}>
+            <Button variant="primary" onClick={this.handleSubmit} onSubmit={this.handleSubmit}>
               更新
             </Button>
           </Modal.Footer>