diff --git a/app/components/Popular.js b/app/components/Popular.js
index af1f8f47..3d54f270 100644
--- 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 }) {
>
-
-
-
- {login}
-
+
+
+
+ {login}
+
+
-
diff --git a/app/components/Results.js b/app/components/Results.js
index fc69d1cd..9d445957 100644
--- 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 }) {
{profile.location && (
-
-
- {profile.location}
+
+
+ {profile.location}
+
)}
{profile.company && (
-
-
- {profile.company}
+
+
+ {profile.company}
+
)}
-
diff --git a/app/components/Tooltip.js b/app/components/Tooltip.js
new file mode 100644
index 00000000..23b215d0
--- /dev/null
+++ 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 (
+
+ {hovering === true &&
{text}
}
+ {children}
+
+ )
+ }
+}
+
+Tooltip.propTypes = {
+ text: PropTypes.string.isRequired
+}
\ No newline at end of file