Add tooltip to expand/compress button (decred#992)

vibros68 · Jan 18, 2019 · 3ae91d8 · 3ae91d8
1 parent 3d86434
commit 3ae91d8
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/src/components/snew/ThingLink.js b/src/components/snew/ThingLink.js
@@ -27,9 +27,21 @@ import {
 } from "../../constants";
 
 const ToggleIcon = (type, onClick) => (
-  <button className="collapse-icon-button" onClick={onClick}>
-    <i className={`fa fa-${type}`} />
-  </button>
+  <div style={{ width: "25px" }}>
+    <Tooltip
+      tipStyle={{
+        fontSize: "14px",
+        left: "30px",
+        width: "145px"
+      }}
+      text={`${type === "expand" ? "Show" : "Hide"} proposal body`}
+      position="right"
+    >
+      <button className="collapse-icon-button" onClick={onClick}>
+        <i className={`fa fa-${type}`} />
+      </button>
+    </Tooltip>
+  </div>
 );
 
 class ThingLinkComp extends React.Component {
@@ -39,7 +51,7 @@ class ThingLinkComp extends React.Component {
       expanded: !this.props.commentid
     };
   }
-  hanldeExpandToggle = e => {
+  handleExpandToggle = e => {
     e && e.preventDefault() && e.stopPropagation();
     this.setState(state => ({ expanded: !state.expanded }));
   };
@@ -408,8 +420,8 @@ class ThingLinkComp extends React.Component {
               is_self,
               selftext,
               selftext_html,
-              expandIcon: ToggleIcon("expand", this.hanldeExpandToggle),
-              compressIcon: ToggleIcon("compress", this.hanldeExpandToggle)
+              expandIcon: ToggleIcon("expand", this.handleExpandToggle),
+              compressIcon: ToggleIcon("compress", this.handleExpandToggle)
             }}
           />
           {this.state.expanded && (