21. Tooltip

uidotdev · Mar 15, 2019 · ce50e03 · ce50e03
1 parent df22ddc
commit ce50e03
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 8 deletions.
diff --git a/app/components/Popular.js b/app/components/Popular.js
@@ -4,6 +4,7 @@ import { fetchPopularRepos } from '../utils/api'
 import { FaUser, FaStar, FaCodeBranch, FaExclamationTriangle } from 'react-icons/fa'
 import Card from './Card'
 import Loading from './Loading'
+import Tooltip from './Tooltip'
 
 function LangaugesNav ({ selected, onUpdateLanguage }) {
   const languages = ['All', 'JavaScript', 'Ruby', 'Java', 'CSS', 'Python']
@@ -46,10 +47,12 @@ function ReposGrid ({ repos }) {
             >
               <ul className='card-list'>
                 <li>
-                  <FaUser color='rgb(255, 191, 116)' size={22} />
-                  <a href={`https://github.com/${login}`}>
-                    {login}
-                  </a>
+                  <Tooltip text="Github username">
+                    <FaUser color='rgb(255, 191, 116)' size={22} />
+                    <a href={`https://github.com/${login}`}>
+                      {login}
+                    </a>
+                  </Tooltip>
                 </li>
                 <li>
                   <FaStar color='rgb(255, 215, 0)' size={22} />

diff --git a/app/components/Results.js b/app/components/Results.js
@@ -4,6 +4,7 @@ import { FaCompass, FaBriefcase, FaUsers, FaUserFriends, FaCode, FaUser } from '
 import Card from './Card'
 import PropTypes from 'prop-types'
 import Loading from './Loading'
+import Tooltip from './Tooltip'
 
 function ProfileList ({ profile }) {
   return (
@@ -14,14 +15,18 @@ function ProfileList ({ profile }) {
       </li>
       {profile.location && (
         <li>
-          <FaCompass color='rgb(144, 115, 255)' size={22} />
-          {profile.location}
+          <Tooltip text="User's location">
+            <FaCompass color='rgb(144, 115, 255)' size={22} />
+            {profile.location}
+          </Tooltip>
         </li>
       )}
       {profile.company && (
         <li>
-          <FaBriefcase color='#795548' size={22} />
-          {profile.company}
+          <Tooltip text="User's company">
+            <FaBriefcase color='#795548' size={22} />
+            {profile.company}
+          </Tooltip>
         </li>
       )}
       <li>

diff --git a/app/components/Tooltip.js b/app/components/Tooltip.js
@@ -0,0 +1,65 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const styles = {
+  container: {
+    position: 'relative',
+    display: 'flex'
+  },
+  tooltip: {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    width: '160px',
+    bottom: '100%',
+    left: '50%',
+    marginLeft: '-80px',
+    borderRadius: '3px',
+    backgroundColor: 'hsla(0, 0%, 20%, 0.9)',
+    padding: '7px',
+    marginBottom: '5px',
+    color: '#fff',
+    textAlign: 'center',
+    fontSize: '14px',
+  }
+}
+
+export default class Tooltip extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      hovering: false,
+    }
+
+    this.mouseOver = this.mouseOver.bind(this)
+    this.mouseOut = this.mouseOut.bind(this)
+  }
+  mouseOver() {
+    this.setState({
+      hovering: true
+    })
+  }
+  mouseOut() {
+    this.setState({
+      hovering: false
+    })
+  }
+  render() {
+    const { text, children } = this.props
+    const { hovering } = this.state
+
+    return (
+      <div
+        onMouseOver={this.mouseOver}
+        onMouseOut={this.mouseOut}
+        style={styles.container}>
+          {hovering === true && <div style={styles.tooltip}>{text}</div>}
+          {children}
+      </div>
+    )
+  }
+}
+
+Tooltip.propTypes = {
+  text: PropTypes.string.isRequired
+}