add tooltips for title bar icons

automerge · Jun 28, 2018 · b9a44fa · b9a44fa
1 parent f766cfd
commit b9a44fa
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/app.css b/src/app.css
@@ -287,6 +287,36 @@ input {
   text-align: center;
 }
 
+.BoardTitle__labeledIcon:hover:after {
+  display: block;
+  position: absolute;
+  white-space: nowrap;
+  max-width: 104px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  box-shadow: 0 0 4px rgba(0,0,0,.25);
+  padding: 2px 4px;
+  background-color: white;
+  border-radius: 4px;
+  top: 36px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.BoardTitle__envelope:hover:after {
+  content: 'Notifications';
+}
+
+.BoardTitle__edit:hover:after {
+  content: 'Edit Board Title';
+}
+
+.BoardTitle__clipboard:hover:after {
+  content: 'Copy link to this...';
+}
+
 .BoardTitle {
   width: 480px;
   position: relative;

diff --git a/src/components/workspace/board-title.jsx b/src/components/workspace/board-title.jsx
@@ -260,7 +260,7 @@ export default class BoardTitle extends React.PureComponent {
         />
       )
     } else {
-      let invitationsClasses = 'fa fa-envelope'
+      let invitationsClasses = 'BoardTitle__labeledIcon BoardTitle__envelope fa fa-envelope'
       if (invitations.length === 0) {
         invitationsClasses += ' hidden'
       }
@@ -277,8 +277,8 @@ export default class BoardTitle extends React.PureComponent {
             defaultValue={this.state.board && this.state.board.title || ''}
           />
           <div className="BoardTitle__actionBar__right">
-            <i className="fa fa-edit" onClick={this.activateTitleEditor} />
-            <i className="fa fa-clipboard" onClick={this.copyToClipboard} />
+            <i className="BoardTitle__labeledIcon BoardTitle__edit fa fa-edit" onClick={this.activateTitleEditor} />
+            <i className="BoardTitle__labeledIcon BoardTitle__clipboard fa fa-clipboard" onClick={this.copyToClipboard} />
           </div>
         </div>
       )