add planet/user tooltip

browser/main/Components/PlanetNavigator.jsx

@@ -23,7 +23,10 @@ var PlanetNavigator = React.createClass({
   render: function () {
     var users = this.props.currentPlanet.Users.map(function (user) {
       return (
-        <li key={'user-' + user.id}><img width='44' height='44' src='../vendor/dummy.jpg'/></li>
+        <li key={'user-' + user.id}>
+          <img width='44' height='44' src='../vendor/dummy.jpg'/>
+          <div className='userTooltip'>{user.profileName}</div>
+        </li>
       )
     })
 

browser/main/Components/UserNavigator.jsx

@@ -44,7 +44,10 @@ module.exports = React.createClass({
     var planets = this.props.currentUser.Planets.map(function (planet, index) {
       return (
         <li key={planet.id} className={this.props.currentPlanet != null && this.props.currentPlanet.name === planet.name ? 'active' : ''}>
-          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}} href>{planet.name[0]}</Link>
+          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}} href>
+            {planet.name[0]}
+            <div className='planetTooltip'>{planet.userName}/{planet.name}</div>
+          </Link>
           <div className='shortCut'>⌘{index + 1}</div>
         </li>
       )

browser/styles/main/containers/PlanetContainer.styl

@@ -135,6 +135,20 @@
       circle()
       margin 3px
       line-height 44px
+      .userTooltip
+        position absolute
+        z-index 500
+        background-color transparentify(invBackgroundColor, 80%)
+        color invTextColor
+        padding 10px
+        line-height 1em
+        border-radius 5px
+        margin-top -15px
+        opacity 0
+        transition 0.1s
+        pointer-events none
+      &:hover .userTooltip
+        opacity 1
 
 
 .PlanetArticleList

browser/styles/main/containers/UserContainer.styl

@@ -46,6 +46,21 @@
         transition 0.1s
         &:hover, &:active
           background-color white
+        .planetTooltip
+          position absolute
+          z-index 500
+          background-color transparentify(invBackgroundColor, 80%)
+          color invTextColor
+          padding 10px
+          line-height 1em
+          border-radius 5px
+          margin-top -41px
+          margin-left 52px
+          opacity 0
+          transition 0.1s
+          pointer-events none
+        &:hover .planetTooltip
+          opacity 1
       img
         circle()
         width 44px