-
Notifications
You must be signed in to change notification settings - Fork 853
/
Tooltip.js
65 lines (59 loc) · 1.23 KB
/
Tooltip.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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
}