feat(tooltip): use native tooltip style

examples/N1-Message-View-on-Github/lib/view-on-github-button.cjsx

@@ -80,7 +80,7 @@ class ViewOnGithubButton extends React.Component
     return null unless @state.link
     <button className="btn btn-toolbar"
             onClick={@_openLink}
-            data-tooltip={"Visit Thread on GitHub"}>
+            title={"Visit Thread on GitHub"}>
       <RetinaImg
         mode={RetinaImg.Mode.ContentIsMask}
         url="nylas://N1-Message-View-on-Github/assets/github@2x.png" />

internal_packages/account-sidebar/lib/account-switcher.cjsx

@@ -43,6 +43,7 @@ class AccountSwitcher extends React.Component
       {@_renderGravatarForAccount(@state.account)}
       <div style={float: 'right', marginTop: -2}>
         <RetinaImg className="toggle"
+                   title={if @state.showing then "Collapse" else "Manage accounts"}
                    name="account-switcher-dropdown.png"
                    mode={RetinaImg.Mode.ContentPreserve} />
       </div>

internal_packages/category-picker/lib/category-picker.cjsx

@@ -70,7 +70,7 @@ class CategoryPicker extends React.Component
 
     if @state.isPopoverOpen then tooltip = ""
 
-    button = <button className="btn btn-toolbar" data-tooltip={tooltip}>
+    button = <button className="btn btn-toolbar" title={tooltip}>
       <RetinaImg name={img} mode={RetinaImg.Mode.ContentIsMask}/>
     </button>
 

internal_packages/composer/lib/compose-button.cjsx

@@ -7,7 +7,7 @@ class ComposeButton extends React.Component
 
   render: =>
     <button className="btn btn-toolbar item-compose"
-            data-tooltip="Compose new message"
+            title="Compose new message"
             onClick={@_onNewCompose}>
       <RetinaImg name="toolbar-compose.png" mode={RetinaImg.Mode.ContentIsMask}/>
     </button>

internal_packages/composer/lib/composer-view.cjsx

@@ -425,11 +425,11 @@ class ComposerView extends React.Component
                       exposedProps={draftClientId:@props.draftClientId, threadId: @props.threadId}>
 
       <button className="btn btn-toolbar btn-trash" style={order: 100}
-              data-tooltip="Delete draft"
+              title="Delete draft"
               onClick={@_destroyDraft}><RetinaImg name="icon-composer-trash.png" mode={RetinaImg.Mode.ContentIsMask} /></button>
 
       <button className="btn btn-toolbar btn-attach" style={order: 50}
-              data-tooltip="Attach file"
+              title="Attach file"
               onClick={@_attachFile}><RetinaImg name="icon-composer-attachment.png" mode={RetinaImg.Mode.ContentIsMask} /></button>
 
       <div style={order: 0, flex: 1} />

internal_packages/composer/lib/expanded-participants.cjsx

@@ -88,7 +88,7 @@ class ExpandedParticipants extends React.Component
 
           { if @props.mode is "inline"
             <span className="header-action show-popout"
-                  data-tooltip="Popout composer"
+                  title="Popout composer"
                   style={paddingLeft: "1.5em"}
                   onClick={@props.onPopoutComposer}>
               <RetinaImg name="composer-popout.png"

internal_packages/composer/lib/floating-toolbar.cjsx

@@ -99,7 +99,7 @@ class FloatingToolbar extends React.Component
         buttons.push(
           <button className="btn btn-extension"
                 onClick={ => @_extensionMutateDom(toolbarItem.mutator)}
-                data-tooltip="#{toolbarItem.tooltip}"><RetinaImg mode={RetinaImg.Mode.ContentIsMask} url="#{toolbarItem.iconUrl}" /></button>)
+                title="#{toolbarItem.tooltip}"><RetinaImg mode={RetinaImg.Mode.ContentIsMask} url="#{toolbarItem.iconUrl}" /></button>)
     return buttons
 
   _extensionMutateDom: (mutator) =>

internal_packages/feedback/lib/feedback-button.cjsx

@@ -21,7 +21,7 @@ class FeedbackButton extends React.Component
     unsub() for unsub in @_unsubs
 
   render: =>
-    <div style={position:"absolute",height:0}>
+    <div style={position:"absolute",height:0} title="Help & Feedback">
       <div className={@_getClassName()} onClick={@_onSendFeedback}>?</div>
     </div>
 

internal_packages/message-list/lib/message-controls.cjsx

@@ -17,6 +17,7 @@ class MessageControls extends React.Component
     <div className="message-actions-wrap">
       <ButtonDropdown
         primaryItem={<RetinaImg name={items[0].image} mode={RetinaImg.Mode.ContentIsMask}/>}
+        primaryTitle={items[0].name}
         primaryClick={items[0].select}
         menu={@_dropdownMenu(items[1..-1])}/>
       <div className="message-actions-ellipsis" onClick={@_onShowActionsMenu}>

internal_packages/message-list/lib/thread-archive-button.cjsx

@@ -18,7 +18,7 @@ class ThreadArchiveButton extends React.Component
 
     <button className="btn btn-toolbar btn-archive"
             style={order: -107}
-            data-tooltip="Archive"
+            title="Archive"
             onClick={@_onArchive}>
       <RetinaImg name="toolbar-archive.png" mode={RetinaImg.Mode.ContentIsMask}/>
     </button>

internal_packages/message-list/lib/thread-star-button.cjsx

@@ -13,7 +13,7 @@ class StarButton extends React.Component
     selected = @props.thread? and @props.thread.starred
     <button className="btn btn-toolbar"
             style={order: -104}
-            data-tooltip="Star"
+            title={if selected then "Remove star" else "Add star"}
             onClick={@_onStarToggle}>
       <RetinaImg name="toolbar-star.png" mode={RetinaImg.Mode.ContentIsMask} selected={selected} />
     </button>

internal_packages/message-list/lib/thread-toggle-unread-button.cjsx

@@ -11,7 +11,7 @@ class ThreadToggleUnreadButton extends React.Component
 
     <button className="btn btn-toolbar"
             style={order: -105}
-            data-tooltip="Mark as #{fragment}"
+            title="Mark as #{fragment}"
             onClick={@_onClick}>
       <RetinaImg name="icon-toolbar-markas#{fragment}@2x.png"
       mode={RetinaImg.Mode.ContentIsMask} />

internal_packages/message-list/lib/thread-trash-button.cjsx

@@ -19,7 +19,7 @@ class ThreadTrashButton extends React.Component
 
     <button className="btn btn-toolbar"
             style={order: -106}
-            data-tooltip="Move to Trash"
+            title="Move to Trash"
             onClick={@_onRemove}>
       <RetinaImg name="toolbar-trash.png" mode={RetinaImg.Mode.ContentIsMask}/>
     </button>

internal_packages/mode-switch/lib/mode-toggle.cjsx

@@ -23,6 +23,7 @@ class ModeToggle extends React.Component
   render: =>
     <button className="btn btn-toolbar mode-toggle mode-#{@state.hidden}"
          style={order:500}
+         title={if @state.hidden then "Show sidebar" else "Hide sidebar"}
          onClick={@_onToggleMode}>
       <RetinaImg
         name="toolbar-icon-toggle-pane.png"

internal_packages/thread-list/lib/draft-buttons.cjsx

@@ -13,7 +13,7 @@ class DraftDeleteButton extends React.Component
   render: ->
     <button style={order:-100}
             className="btn btn-toolbar"
-            data-tooltip="Delete"
+            title="Delete"
             onClick={@_destroySelected}>
       <RetinaImg name="icon-composer-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
     </button>

internal_packages/thread-list/lib/thread-buttons.cjsx

@@ -1,3 +1,4 @@
+_ = require 'underscore'
 React = require "react/addons"
 classNames = require 'classnames'
 ThreadListStore = require './thread-list-store'
@@ -20,7 +21,7 @@ class ThreadBulkArchiveButton extends React.Component
 
     <button style={order:-107}
             className="btn btn-toolbar"
-            data-tooltip="Archive"
+            title="Archive"
             onClick={@_onArchive}>
       <RetinaImg name="toolbar-archive.png" mode={RetinaImg.Mode.ContentIsMask} />
     </button>
@@ -44,7 +45,7 @@ class ThreadBulkTrashButton extends React.Component
 
     <button style={order:-106}
             className="btn btn-toolbar"
-            data-tooltip="Move to Trash"
+            title="Move to Trash"
             onClick={@_onRemove}>
       <RetinaImg name="toolbar-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
     </button>
@@ -64,9 +65,12 @@ class ThreadBulkStarButton extends React.Component
     selection: React.PropTypes.object.isRequired
 
   render: ->
+    noStars = _.every @props.selection.items(), (t) -> _.isMatch(t, {starred: false})
+    title = if noStars then "Star all" else "Remove stars from all"
+
     <button style={order:-104}
             className="btn btn-toolbar"
-            data-tooltip="Star"
+            title={title}
             onClick={@_onStar}>
       <RetinaImg name="toolbar-star.png" mode={RetinaImg.Mode.ContentIsMask} />
     </button>
@@ -89,7 +93,7 @@ class ThreadBulkToggleUnreadButton extends React.Component
 
     <button style={order:-105}
             className="btn btn-toolbar"
-            data-tooltip="Mark as #{fragment}"
+            title="Mark as #{fragment}"
             onClick={@_onClick}>
       <RetinaImg name="icon-toolbar-markas#{fragment}@2x.png"
                  mode={RetinaImg.Mode.ContentIsMask} />
@@ -131,7 +135,7 @@ DownButton = React.createClass
   mixins: [ThreadNavButtonMixin]
 
   render: ->
-    <div className={@_classSet()} onClick={@_onClick}>
+    <div className={@_classSet()} onClick={@_onClick} title="Next thread">
       <RetinaImg name="toolbar-down-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
     </div>
 
@@ -154,7 +158,7 @@ UpButton = React.createClass
   mixins: [ThreadNavButtonMixin]
 
   render: ->
-    <div className={@_classSet()} onClick={@_onClick}>
+    <div className={@_classSet()} onClick={@_onClick} title="Previous thread">
       <RetinaImg name="toolbar-up-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
     </div>
 

internal_packages/thread-list/lib/thread-list-icon.cjsx

@@ -43,7 +43,9 @@ class ThreadListIcon extends React.Component
     true
 
   render: =>
-    <div className="thread-icon #{@_iconType()}" onClick={@_onToggleStar}></div>
+    <div className="thread-icon #{@_iconType()}"
+         title="Star"
+         onClick={@_onToggleStar}></div>
 
   _onToggleStar: (event) =>
     task = new ChangeStarredTask(thread: @props.thread, starred: !@props.thread.starred)

internal_packages/thread-list/lib/thread-list-quick-actions.cjsx

@@ -16,11 +16,13 @@ class ThreadListQuickActions extends React.Component
 
     if mailViewFilter?.canArchiveThreads()
       archive = <div key="archive"
+                     title="Archive"
                      className="btn action action-archive"
                      onClick={@_onArchive}></div>
 
     if mailViewFilter?.canTrashThreads()
       trash = <div key="remove"
+                   title="Trash"
                    className='btn action action-trash'
                    onClick={@_onRemove}></div>
 

internal_packages/tooltip/lib/tooltip.cjsx

@@ -3,6 +3,8 @@ React = require 'react/addons'
 {DOMUtils} = require 'nylas-exports'
 
 ###
+IMPORTANT: This has been deprecated. Use the native `title=` attribute instead.
+This will ensure native-behavior cross platform.
 The Tooltip component displays a consistent hovering tooltip for use when
 extra context information is required.
 

src/components/button-dropdown.cjsx

@@ -20,7 +20,9 @@ class ButtonDropdown extends React.Component
 
     if @props.primaryClick
       <div ref="button" onBlur={@_onBlur} tabIndex={999} className={classnames}>
-        <div className="primary-item" onClick={@props.primaryClick}>
+        <div className="primary-item"
+             title={@props.primaryTitle ? ""}
+             onClick={@props.primaryClick}>
           {@props.primaryItem}
         </div>
         <div className="secondary-picker" onClick={@toggleDropdown}>
@@ -32,7 +34,9 @@ class ButtonDropdown extends React.Component
       </div>
     else
       <div ref="button" onBlur={@_onBlur} tabIndex={999} className={classnames}>
-        <div className="only-item" onClick={@toggleDropdown}>
+        <div className="only-item"
+             title={@props.primaryTitle ? ""}
+             onClick={@toggleDropdown}>
           {@props.primaryItem}
           <RetinaImg name={"icon-thread-disclosure.png"} style={marginLeft:12} mode={RetinaImg.Mode.ContentIsMask}/>
         </div>

src/components/mail-important-icon.cjsx

@@ -38,7 +38,9 @@ class MailImportantIcon extends React.Component
     isImportant = _.findWhere(@props.thread.labels, {id: importantId})?
 
     activeClassname = if isImportant then "active" else ""
-    <div className="mail-important-icon #{activeClassname}" onClick={@_onToggleImportant}></div>
+    <div className="mail-important-icon #{activeClassname}"
+         title={if isImportant then "Mark as unimportant" else "Mark as important"}
+         onClick={@_onToggleImportant}></div>
 
   _onToggleImportant: (event) =>
     importantLabel = CategoryStore.getStandardCategory('important')

src/sheet-toolbar.cjsx

@@ -61,7 +61,7 @@ class ToolbarBack extends React.Component
     else
       title = "Back"
 
-    <div className="item-back" onClick={@_onClick}>
+    <div className="item-back" onClick={@_onClick} title="Return to #{title}">
       <RetinaImg name="sheet-back.png" mode={RetinaImg.Mode.ContentIsMask} />
       <div className="item-back-title">{title}</div>
     </div>