add tooltip

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