refactor tips

app/scripts/App.jsx

@@ -32,7 +32,6 @@ var App = React.createClass({
                 <div className="container">
                     <Header logos={state.logos}/>
                     <main>
-
                         <ul className="logos">
                             {logos}
                         </ul>
@@ -42,7 +41,6 @@ var App = React.createClass({
             </div>
         );
     }
-
 });
 
 module.exports = App;

app/scripts/components/Logo.jsx

@@ -7,13 +7,19 @@ var Logo = React.createClass({
         info: React.PropTypes.object.isRequired
     },
 
-    render: function () {
+    toggleInfo (e) {
+        var el = e.currentTarget;
+        el.parentNode.classList.toggle('visible');
+    },
+
+    render () {
         var info = this.props.info;
 
         return (
             <li>
                 <a href={info.url} target="_blank" className="logo-item">
-                    <img src={'../logos/' + info.image} alt={info.name} className={info.shotname}/>
+                    <img src={'../logos/' + info.image} alt={info.name} className={info.shotname}
+                         onMouseEnter={this.toggleInfo} onMouseLeave={this.toggleInfo}/>
                     <span className="name">{info.name}</span>
                 </a>
             </li>

app/scripts/main.js

@@ -1,27 +1,9 @@
 var React = require('react'),
     App  = require('./App');
 
-var showName = (e) => {
-    var el = e.toElement;
-    el.parentNode.classList.add('visible');
-};
 
-var hideName = (e) => {
-    var el = e.fromElement;
-    el.parentNode.classList.remove('visible');
-};
-
-
-var enableTips = () => {
-    var elems = document.querySelectorAll('.logo-item img');
-    for (var i = 0; i < elems.length; i++) {
-        elems[i].addEventListener("mouseenter", showName, false);
-        elems[i].addEventListener("mouseleave", hideName, false);
-    }
-};
 
 document.addEventListener('DOMContentLoaded', function () {
     React.render(<App/>, document.getElementById('react'));
-    enableTips();
 });