Skip to content

Commit fc9046b

Browse files
Colinh84Colinh84
committed
Tooltip final fix - moved target element inside Tooltip component
1 parent c0ad255 commit fc9046b

File tree

4 files changed

+121
-119
lines changed

4 files changed

+121
-119
lines changed

‎components/Tooltip/Tooltip.jsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ class Tooltip extends Component {
1919
const pointerGap = this.props.pointerGap
2020
const tooltipPadding = this.props.tooltipPadding
2121
const tooltipDelay = this.props.tooltipDelay
22-
const tooltip = ReactDOM.findDOMNode(this)
23-
const ttContainer = tooltip.querySelector('.tooltip-container')
22+
const tooltip = ReactDOM.findDOMNode(this).querySelector('.tooltip-container')
23+
const ttContainer = tooltip.querySelector('.tooltip-content-container')
2424
const tooltipPointer = ttContainer.querySelector('.tooltip-pointer')
2525
const targetRect = evt.currentTarget.getBoundingClientRect()
2626
const targetRectCenterX = (targetRect.width / 2) + targetRect.left + window.scrollX
@@ -84,7 +84,7 @@ class Tooltip extends Component {
8484
}
8585

8686
hideTooltip() {
87-
const tooltip = ReactDOM.findDOMNode(this)
87+
const tooltip = ReactDOM.findDOMNode(this).querySelector('.tooltip-container')
8888
if (!tooltip.classList.contains('tooltip-hide')) {
8989
tooltip.classList.add('tooltip-hide')
9090
tooltip.style.transition = 'opacity 0s linear'
@@ -103,8 +103,7 @@ class Tooltip extends Component {
103103
}
104104

105105
componentDidMount() {
106-
const targetId = this.props.tooltipId
107-
const target = document.getElementById(targetId)
106+
const target = ReactDOM.findDOMNode(this).querySelector('.tooltip-target')
108107
if (this.props.popMethod === 'hover') {
109108
target.addEventListener('mouseenter', this.showTooltip)
110109
target.addEventListener('mouseleave', this.hideTooltip)
@@ -115,8 +114,7 @@ class Tooltip extends Component {
115114
}
116115

117116
componentWillUnmount() {
118-
const targetId = this.props.tooltipId
119-
const target = document.getElementById(targetId)
117+
const target = ReactDOM.findDOMNode(this).querySelector('.tooltip-target')
120118
target.removeEventListener('mouseenter', this.showTooltip)
121119
target.removeEventListener('mouseleave', this.hideTooltip)
122120

@@ -125,31 +123,40 @@ class Tooltip extends Component {
125123
}
126124

127125
render() {
126+
128127
const body = (
129128
<div className="tooltip-body">
130129
{React.Children.map(this.props.children, (child) => {
131-
return child.props.children
130+
if(child.props.className === 'tooltip-body')
131+
return child.props.children
132132
})}
133133
</div>
134134
)
135135
const ttClasses = classNames(
136-
'Tooltip', 'tooltip-hide', this.props.theme, this.props.className
136+
'Tooltip', this.props.theme, this.props.className
137137
)
138138
return (
139139
<div className={ttClasses}>
140-
<div className="tooltip-container">
141-
<div className="tooltip-pointer">
140+
{
141+
React.Children.map(this.props.children, (child) => {
142+
if(child.props.className === 'tooltip-target')
143+
return child
144+
})
145+
}
146+
<div className="tooltip-container tooltip-hide">
147+
<div className="tooltip-content-container">
148+
<div className="tooltip-pointer">
149+
</div>
150+
{body}
142151
</div>
143-
{body}
144152
</div>
145153
</div>
146154
)
147155
}
148156
}
149157

150158
Tooltip.propTypes = {
151-
children : PropTypes.object.isRequired,
152-
tooltipId : PropTypes.string.isRequired,
159+
children : PropTypes.array.isRequired,
153160
pointerWidth : PropTypes.number,
154161
tooltipMargin : PropTypes.number,
155162
pointerGap : PropTypes.number,

‎components/Tooltip/Tooltip.scss‎

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,64 @@
22

33
$tc-gray-80: #47474f;
44

5-
.hastooltip {
6-
cursor: default;
7-
8-
&.click-pointer {
9-
cursor: pointer;
10-
}
11-
}
12-
135
.Tooltip {
14-
position: absolute;
15-
white-space: nowrap;
16-
display: block;
17-
visibility: visible;
18-
opacity: 1;
19-
transition: opacity 0s linear;
20-
z-index: 1000;
21-
left: -9999px;
22-
top: -9999px;
6+
.tooltip-target {
7+
cursor: default;
238

24-
&.tooltip-hide {
25-
visibility: hidden;
26-
opacity: 0;
9+
&.click-pointer {
10+
cursor: pointer;
11+
}
2712
}
28-
2913
.tooltip-container {
30-
background-color: $tc-gray-80;
31-
color: #fff;
32-
width: 100%;
33-
height: 100%;
34-
padding: 15px;
35-
-webkit-border-radius: 5px;
36-
-moz-border-radius: 5px;
37-
border-radius: 5px;
14+
position: absolute;
15+
white-space: nowrap;
16+
display: block;
17+
visibility: visible;
18+
opacity: 1;
19+
transition: opacity 0s linear;
20+
z-index: 1000;
21+
left: -9999px;
22+
top: -9999px;
3823

39-
.tooltip-pointer {
40-
position: absolute;
41-
height: 10px;
42-
width: 10px;
43-
background-color: $tc-gray-80;
44-
transform: rotate(45deg);
45-
bottom: -5px;
46-
left: calc(50% - 5px);
47-
z-index:-1;
24+
&.tooltip-hide {
25+
visibility: hidden;
26+
opacity: 0;
4827
}
4928

50-
.tooltip-body {
51-
position: relative;
29+
.tooltip-content-container {
30+
background-color: $tc-gray-80;
5231
color: #fff;
53-
font-size: 14px;
54-
padding: 0;
55-
margin: 0;
56-
z-index:2;
32+
width: 100%;
33+
height: 100%;
34+
padding: 15px;
35+
-webkit-border-radius: 5px;
36+
-moz-border-radius: 5px;
37+
border-radius: 5px;
38+
39+
.tooltip-pointer {
40+
position: absolute;
41+
height: 10px;
42+
width: 10px;
43+
background-color: $tc-gray-80;
44+
transform: rotate(45deg);
45+
bottom: -5px;
46+
left: calc(50% - 5px);
47+
z-index:-1;
48+
}
49+
50+
.tooltip-body {
51+
position: relative;
52+
color: #fff;
53+
font-size: 14px;
54+
padding: 0;
55+
margin: 0;
56+
z-index:2;
57+
}
5758
}
5859
}
5960
//tooltip theme styling
6061
&.default {
61-
.tooltip-container {
62+
.tooltip-content-container {
6263
//additional theme styling goes here
6364
.tooltip-pointer {
6465

‎components/Tooltip/TooltipExamples.jsx‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,45 @@ require('./TooltipExamples.scss')
55

66
const TooltipExamples = () => (
77
<div className="tooltip-examples-container">
8-
<div className="hastooltip" id="tooltip-1">Default Mouseover Tooltip Example</div>
9-
10-
<Tooltip tooltipId="tooltip-1">
8+
<Tooltip>
9+
<div className="tooltip-target" id="tooltip-1">Default Mouseover Tooltip Example</div>
1110
<div className="tooltip-body">
1211
<p>This is a tooltip using the default theme.</p>
1312
</div>
1413
</Tooltip>
1514

16-
<div className="hastooltip" id="tooltip-2">Click Tooltip with Custom Classes Example</div>
17-
18-
<Tooltip tooltipId="tooltip-2" popMethod="click" className="TestClassOne CustomClass2 AnotherCustomClass">
15+
<Tooltip popMethod="click" className="TestClassOne CustomClass2 AnotherCustomClass">
16+
<div className="tooltip-target" id="tooltip-2">Click Tooltip with Custom Classes Example</div>
1917
<div className="tooltip-body">
2018
<p>This is a tooltip activated with a mouse click.</p>
2119
<p>This tooltip also contains custom classes passed through the tooltip component render.</p>
2220
<p>Click Target again to close tooltip.</p>
2321
</div>
2422
</Tooltip>
2523

26-
<div className="hastooltip" id="tooltip-3">Themed Tooltip Example</div>
27-
28-
<Tooltip tooltipId="tooltip-3" theme="blue-round">
24+
<Tooltip theme="blue-round">
25+
<div className="tooltip-target" id="tooltip-3">Themed Tooltip Example</div>
2926
<div className="tooltip-body">
3027
<p>This is a tooltip using a custom theme.</p>
3128
</div>
3229
</Tooltip>
3330

34-
<div className="hastooltip" id="tooltip-4">Delayed Tooltip Example</div>
35-
36-
<Tooltip tooltipId="tooltip-4" tooltipDelay={3000}>
31+
<Tooltip tooltipDelay={3000}>
32+
<div className="tooltip-target" id="tooltip-4">Delayed Tooltip Example</div>
3733
<div className="tooltip-body">
3834
<p>This is a tooltip with a 3 second popup delay and a transition effect.</p>
3935
</div>
4036
</Tooltip>
4137

42-
<div className="hastooltip" id="tooltip-5">Alternative Spacing Tooltip Example</div>
43-
44-
<Tooltip tooltipId="tooltip-5" pointerWidth={20} tooltipMargin={25} tooltipPadding={5} pointerGap={1}>
38+
<Tooltip pointerWidth={20} tooltipMargin={25} tooltipPadding={5} pointerGap={1}>
39+
<div className="tooltip-target" id="tooltip-5">Alternative Spacing Tooltip Example</div>
4540
<div className="tooltip-body">
46-
<p>This is a tooltip with alternative padding, margin, pointer size and gap sized configured through tooltip custom attributes.</p>
41+
<p>This is a tooltip with alternative padding, margin, pointer size and gap size configured through tooltip custom attributes.</p>
4742
</div>
4843
</Tooltip>
4944

50-
<img src="http://placekitten.com/200/200" className="hastooltip" id="tooltip-6" alt="tooltip on image target example" />
51-
52-
<Tooltip tooltipId="tooltip-6">
45+
<Tooltip>
46+
<img src="http://placekitten.com/200/200" className="tooltip-target" id="tooltip-6" alt="tooltip on image target example" />
5347
<div className="tooltip-body">
5448
<p>This is a tooltip on an image and also containing an image.</p>
5549
<p>Tooltips can be applied to any HTML tag, and contain any content.</p>

‎components/Tooltip/TooltipExamples.scss‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
11
.tooltip-examples-container {
2-
.hastooltip {
3-
position: relative;
4-
width: 150px;
5-
background-color: #999;
6-
height: 150px;
7-
margin: 10px;
8-
font-size: 14px;
9-
font-weight: bold;
10-
color: #fff;
11-
text-align: center;
12-
padding: 15px;
132

14-
&#tooltip-1 {
15-
float: left;
16-
}
3+
.Tooltip {
4+
.tooltip-target {
5+
position: relative;
6+
width: 150px;
7+
background-color: #999;
8+
height: 150px;
9+
margin: 10px;
10+
font-size: 14px;
11+
font-weight: bold;
12+
color: #fff;
13+
text-align: center;
14+
padding: 15px;
1715

18-
&#tooltip-2 {
19-
float: right;
20-
width: 50%;
21-
background-color: #C00;
22-
}
16+
&#tooltip-1 {
17+
float: left;
18+
}
2319

24-
&#tooltip-3 {
25-
clear: both;
26-
margin-left: 25%;
27-
background-color: #CC0;
20+
&#tooltip-2 {
21+
float: right;
22+
width: 50%;
23+
background-color: #C00;
24+
}
2825

29-
}
26+
&#tooltip-3 {
27+
clear: both;
28+
margin-left: 25%;
29+
background-color: #CC0;
3030

31-
&#tooltip-4 {
32-
margin-left: 50%;
33-
background-color: #0C0;
34-
}
31+
}
3532

36-
&#tooltip-5 {
37-
margin-left: 75%;
38-
background-color: #00C;
39-
}
33+
&#tooltip-4 {
34+
margin-left: 50%;
35+
background-color: #0C0;
36+
}
4037

41-
&#tooltip-6 {
42-
margin-left: calc(100% - 200px);
43-
padding: 0;
44-
height: 200px;
45-
width: 200px;
46-
}
47-
}
38+
&#tooltip-5 {
39+
margin-left: 75%;
40+
background-color: #00C;
41+
}
4842

49-
.Tooltip {
43+
&#tooltip-6 {
44+
margin-left: calc(100% - 200px);
45+
padding: 0;
46+
height: 200px;
47+
width: 200px;
48+
}
49+
}
5050
//custom theme
5151
&.blue-round {
52-
.tooltip-container {
52+
.tooltip-content-container {
5353
background-color: #0000CC;
5454
border: 3px solid #000;
5555
-webkit-border-radius: 50%;

0 commit comments

Comments
 (0)