Add tooltip to github-tile-view

Tilde Ann Thurium · mofo37 · Tilde Ann Thurium · commit ad7e9d733f9d · 2018-12-17T14:52:53.000-08:00
Co-Authored-By: mofo37 &lt;mofo37@gmail.com&gt;
diff --git a/lib/controllers/status-bar-tile-controller.js b/lib/controllers/status-bar-tile-controller.js
@@ -89,7 +89,10 @@ export default class StatusBarTileController extends React.Component {
     return (
       <Fragment>
         {this.renderTiles(repoProps)}
-        <GithubTileView didClick={this.props.toggleGithubTab} />
+        <GithubTileView
+          didClick={this.props.toggleGithubTab}
+          tooltips={this.props.tooltips}
+        />
         <ChangedFilesCountView
           didClick={this.props.toggleGitTab}
           changedFilesCount={repoProps.changedFilesCount}
diff --git a/lib/views/github-tile-view.js b/lib/views/github-tile-view.js
@@ -2,17 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Octicon from '../atom/octicon';
 
+import RefHolder from '../models/ref-holder';
+import Tooltip from '../atom/tooltip';
 import {addEvent} from '../reporter-proxy';
 import {autobind} from '../helpers';
 
 export default class GithubTileView extends React.Component {
   static propTypes = {
     didClick: PropTypes.func.isRequired,
+    tooltips: PropTypes.object.isRequired
   }
 
   constructor(props) {
     super(props);
     autobind(this, 'handleClick');
+    this.refTileNode = new RefHolder();
   }
 
   handleClick() {
@@ -22,12 +26,22 @@ export default class GithubTileView extends React.Component {
 
   render() {
     return (
-      <button
-        className="github-StatusBarTile inline-block"
-        onClick={this.handleClick}>
-        <Octicon icon="mark-github" />
-        GitHub
-      </button>
+      <span ref={this.refTileNode.setter}>
+        <button
+          className="github-StatusBarTile inline-block"
+          onClick={this.handleClick}>
+          <Octicon icon="mark-github" />
+          GitHub
+        </button>
+        <Tooltip
+          key="tooltip"
+          manager={this.props.tooltips}
+          target={this.refTileNode}
+          title={`<div style="text-align: left; line-height: 1.2em;">${'hi'}</div>`}
+          showDelay={atom.tooltips.hoverDefaults.delay.show}
+          hideDelay={atom.tooltips.hoverDefaults.delay.hide}
+        />
+      </span>
     );
   }
 }
