add tooltip

Author: Rokt33r

browser/main/Detail/MarkdownNoteDetail.js

@@ -263,13 +263,20 @@ class MarkdownNoteDetail extends React.Component {
               />
               <button styleName='info-right-button'
                 onClick={(e) => this.handleShareButtonClick(e)}
+                disabled
               >
                 <i className='fa fa-share-alt fa-fw'/>
+                <span styleName='info-right-button-tooltip'
+                  style={{right: 20}}
+                >Share Note</span>
               </button>
               <button styleName='info-right-button'
                 onClick={(e) => this.handleContextButtonClick(e)}
               >
                 <i className='fa fa-ellipsis-v'/>
+                <span styleName='info-right-button-tooltip'
+                  style={{right: 5}}
+                >More Options</span>
               </button>
             </div>
           </div>

browser/main/Detail/MarkdownNoteDetail.styl

@@ -77,11 +77,18 @@ $info-height = 75px
   padding 0
   &:active
     border-color $ui-button--focus-borderColor
-  &:hover .left-control-newPostButton-tooltip
-    display block
+  &:hover .info-right-button-tooltip
+    opacity 1
   &:focus
     border-color $ui-button--focus-borderColor
 
+.info-right-button-tooltip
+  tooltip()
+  position fixed
+  top 45px
+  padding 5px
+  opacity 0
+
 .body
   absolute bottom left right
   top $info-height

browser/main/Detail/SnippetNoteDetail.js

@@ -434,13 +434,20 @@ class SnippetNoteDetail extends React.Component {
               />
               <button styleName='info-right-button'
                 onClick={(e) => this.handleShareButtonClick(e)}
+                disabled
               >
                 <i className='fa fa-share-alt fa-fw'/>
+                <span styleName='info-right-button-tooltip'
+                  style={{right: 20}}
+                >Share Note</span>
               </button>
               <button styleName='info-right-button'
                 onClick={(e) => this.handleContextButtonClick(e)}
               >
                 <i className='fa fa-ellipsis-v'/>
+                <span styleName='info-right-button-tooltip'
+                  style={{right: 5}}
+                >More Options</span>
               </button>
             </div>
           </div>

browser/main/Detail/SnippetNoteDetail.styl

@@ -77,10 +77,16 @@ $info-height = 75px
   padding 0
   &:active
     border-color $ui-button--focus-borderColor
-  &:hover .left-control-newPostButton-tooltip
-    display block
+  &:hover .info-right-button-tooltip
+    opacity 1
   &:focus
     border-color $ui-button--focus-borderColor
+.info-right-button-tooltip
+  tooltip()
+  position fixed
+  top 45px
+  padding 5px
+  opacity 0
 
 .body
   absolute bottom left right

browser/main/Detail/StarButton.js

@@ -47,11 +47,13 @@ class StarButton extends React.Component {
         onMouseLeave={(e) => this.handleMouseLeave(e)}
         onClick={this.props.onClick}
       >
-        <i className={this.state.isActive || this.props.isActive
-          ? 'fa fa-star'
-          : 'fa fa-star-o'
-        }
+        <i styleName='icon'
+          className={this.state.isActive || this.props.isActive
+            ? 'fa fa-star'
+            : 'fa fa-star-o'
+          }
         />
+        <span styleName='tooltip'>Star Note</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -1,11 +1,25 @@
 .root
   position relative
   padding 0
-  transition transform 0.15s
   &:hover
-    transform rotate(-72deg)
+    .icon
+      transform rotate(-72deg)
+    .tooltip
+      opacity 1
+
 
 .root--active
   @extend .root
   color $ui-active-color
-  transform rotate(-72deg)
+  .icon
+    transform rotate(-72deg)
+.icon
+  transition transform 0.15s
+
+.tooltip
+  tooltip()
+  position fixed
+  top 45px
+  right 65px
+  padding 5px
+  opacity 0

browser/main/TopBar/TopBar.styl

@@ -88,19 +88,17 @@ $control-height = 34px
   padding 0
   &:active
     border-color $ui-button--active-backgroundColor
-  &:hover .left-control-newPostButton-tooltip
-    display block
+  &:hover .control-newPostButton-tooltip
+    opacity 1
 
 .control-newPostButton-tooltip
+  tooltip()
   position fixed
-  line-height 1.4
-  background-color $ui-tooltip-backgroundColor
-  color $ui-tooltip-text-color
-  font-size 10px
-  margin-left -25px
-  margin-top 5px
-  padding 5px
-  z-index 1
-  border-radius 5px
-  display none
   pointer-events none
+  top 45px
+  left 385px
+  z-index 10
+  padding 5px
+  line-height normal
+  opacity 0
+  transition 0.1s

browser/main/modals/PreferencesModal/StorageItem.js

@@ -313,16 +313,25 @@ class StorageItem extends React.Component {
               onClick={(e) => this.handleNewFolderButtonClick(e)}
             >
               <i className='fa fa-plus'/>
+              <span styleName='header-control-button-tooltip'
+                style={{left: -20}}
+              >Add Folder</span>
             </button>
             <button styleName='header-control-button'
               onClick={(e) => this.handleExternalButtonClick(e)}
             >
               <i className='fa fa-external-link'/>
+              <span styleName='header-control-button-tooltip'
+                style={{left: -50}}
+              >Open Storage folder</span>
             </button>
             <button styleName='header-control-button'
               onClick={(e) => this.handleUnlinkButtonClick(e)}
             >
               <i className='fa fa-unlink'/>
+              <span styleName='header-control-button-tooltip'
+                style={{left: -10}}
+              >Unlink</span>
             </button>
           </div>
         </div>

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -47,8 +47,21 @@
   border-radius 2px
   border $ui-border
   margin-right 5px
+  position relative
   &:last-child
     margin-right 0
+  &:hover
+    .header-control-button-tooltip
+      opacity 1
+
+.header-control-button-tooltip
+  tooltip()
+  position absolute
+  opacity 0
+  padding 5px
+  top 25px
+  z-index 10
+  white-space nowrap
 
 .folderList-item
   height 35px

browser/styles/index.styl

@@ -29,6 +29,15 @@ $ui-tooltip-text-color = white
 $ui-tooltip-backgroundColor = alpha(#444, 70%)
 $ui-tooltip-button-backgroundColor = #D1D1D1
 $ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
+$ui-tooltip-font-size = 12px
+
+tooltip()
+  background-color $ui-tooltip-backgroundColor = alpha(#444, 70%)
+  color $ui-tooltip-text-color = white
+  font-size $ui-tooltip-font-size
+  pointer-events none
+  transition 0.1s
+
 
 // UI Input
 $ui-input--focus-borderColor = #369DCD