Move styles for ToolTip and ToolTipLink into CSS

js/component/common.js

@@ -50,17 +50,6 @@ export let BusyMessage = React.createClass({
   }
 });
 
-var toolTipStyle = {
-  position: 'absolute',
-  zIndex: '1',
-  top: '100%',
-  left: '-120px',
-  width: '260px',
-  padding: '15px',
-  border: '1px solid #aaa',
-  backgroundColor: '#fff',
-  fontSize: '14px',
-};
 export let ToolTip = React.createClass({
   propTypes: {
     open: React.PropTypes.bool.isRequired,
@@ -68,7 +57,7 @@ export let ToolTip = React.createClass({
   },
   render: function() {
     return (
-      <div className={this.props.open ? '' : 'hidden'} style={toolTipStyle} onMouseOut={this.props.onMouseOut}>
+      <div className={'tooltip ' + (this.props.className || '') + (this.props.open ? '' : ' hidden')} onMouseOut={this.props.onMouseOut}>
         {this.props.children}
       </div>
     );

js/component/link.js

@@ -53,10 +53,6 @@ export let Link = React.createClass({
   }
 });
 
-var linkContainerStyle = {
-  position: 'relative',
-};
-
 export let ToolTipLink = React.createClass({
   getInitialState: function() {
     return {
@@ -79,22 +75,21 @@ export let ToolTipLink = React.createClass({
     });
   },
   render: function() {
-    var href = this.props.href ? this.props.href : 'javascript:;',
+    const linkClass = 'tooltip-link__link ' + (this.props.className ? this.props.className + '__link' : '') +
-      icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
-      className = this.props.className +
                       (this.props.button ? ' button-block button-' + this.props.button : '') +
                       (this.props.hidden ? ' hidden' : '') +
                       (this.props.disabled ? ' disabled' : '');
+    const toolTipClass = 'tooltip-link__tooltip ' + (this.props.className ? this.props.className + '__tooltip' : '');
 
     return (
-      <span style={linkContainerStyle}>
+      <span className={'tooltip-link ' + (this.props.className || '')}>
-        <a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
+        <a className={linkClass} href={this.props.href || 'javascript:;'}
            title={this.props.title} onClick={this.handleClick}>
-          {this.props.icon ? icon : '' }
+          {this.props.icon ? <Icon icon={this.props.icon} />  : null }
           {this.props.label}
         </a>
         {(!this.props.tooltip ? null :
-          <ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
+          <ToolTip className={toolTipClass} open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
             {this.props.tooltip}
           </ToolTip>
         )}

js/page/discover.js

@@ -65,6 +65,9 @@ var featuredContentLegendStyle = {
 
 var FeaturedContent = React.createClass({
   render: function() {
+    const toolTipText = ('Community Content is a public space where anyone can share content with the ' +
+                        'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
+                        '"five" to put your content here!');
     return (
       <div className="row-fluid">
         <div className="span6">
@@ -77,8 +80,11 @@ var FeaturedContent = React.createClass({
 
         </div>
         <div className="span6">
-          <h3>Community Content <ToolTipLink style={featuredContentLegendStyle} label="What's this?"
+          <h3>
-            tooltip='Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!' /></h3>
+            Community Content {' '}
+            <ToolTipLink label="What's this?"
+                         tooltip={toolTipText} />
+          </h3>
           <FileTile name="one" />
           <FileTile name="two" />
           <FileTile name="three" />

scss/all.scss

@@ -8,4 +8,6 @@
 @import "component/_file-actions.scss";
 @import "component/_file-tile.scss";
 @import "component/_menu.scss";
+@import "component/_tooltiplink.scss";
+@import "component/_tooltip.scss";
 @import "page/_developer.scss";

scss/component/_tooltip.scss

@@ -0,0 +1,13 @@
+.tooltip {
+  text-align: left;
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: -120px;
+  width: 260px;
+  padding: 15px;
+  border: 1px solid #aaa;
+  color: $color-text-dark;
+  background-color: $color-bg;
+  font-size: 14px;
+}

scss/component/_tooltiplink.scss

@@ -0,0 +1,12 @@
+.tooltip-link {
+  position: relative;
+}
+
+.tooltip-link__link {
+  font-size: 12px;
+  color: #aaa;
+  vertical-align: 15%;
+  &:hover {
+    text-decoration: underline;
+  }
+}