Skip to content

Commit 3dc3375

Browse files
danielbariondanielbarion
authored
Merge pull request #806 from erezcarmel/custom-round-corners [skip ci]
feat: Refactored the arrow implementation, added custom corners support
2 parents df4a466 + ceda5bd commit 3dc3375

File tree

9 files changed

+266
-111
lines changed

9 files changed

+266
-111
lines changed

‎example/src/App.js‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ export default class App extends Component {
270270
<div className="side">
271271
<a
272272
data-for="custom-off-event"
273-
ref={ref => (this.targetRef = ref)}
273+
ref={(ref) => (this.targetRef = ref)}
274274
data-tip="custom show and hide"
275275
data-event="click"
276276
data-event-off="dblclick"
@@ -352,6 +352,58 @@ export default class App extends Component {
352352
</pre>
353353
</div>
354354

355+
<div className="section">
356+
<h4 className="title">Custom radius</h4>
357+
<p className="sub-title" />
358+
<div className="example-jsx">
359+
<div className="side">
360+
<a
361+
data-for="custom-tooltip-radius"
362+
data-tip="No tooltip border radius!"
363+
>
364+
ㅇㅅㅇ
365+
</a>
366+
<ReactTooltip
367+
id="custom-tooltip-radius"
368+
place="right"
369+
className="custom-tooltip-radius"
370+
tooltipRadius="0"
371+
/>
372+
</div>
373+
<div className="side">
374+
<a
375+
data-for="custom-arrow-radius"
376+
data-tip="That is an arrow with border radius!"
377+
>
378+
V(^-^)V
379+
</a>
380+
<ReactTooltip
381+
id="custom-arrow-radius"
382+
className="custom-arrow-radius"
383+
place="top"
384+
arrowRadius="3"
385+
/>
386+
</div>
387+
</div>
388+
<br />
389+
<pre className="example-pre">
390+
<div>
391+
<p>
392+
{"<a data-for='custom-tooltip-radius' data-tip='Lovely colors!'>ㅇㅅㅇ</a>\n" +
393+
"<ReactTooltip id='custom-tooltip-radius' className='custom-tooltip-radius' place='right'\n" +
394+
"backgroundColor='#E69A8DFF' tooltipRadius='0'/>"}
395+
</p>
396+
</div>
397+
<div>
398+
<p>
399+
{"<a data-for='custom-arrow-radius' data-tip='That is an arrow with border radius!'>V(^-^)V</a>\n" +
400+
"<ReactTooltip id='custom-arrow-radius' className='custom-arrow-radius' place='top' border\n" +
401+
"backgroundColor='#E69A8DFF' arrowRadius='3'/>"}
402+
</p>
403+
</div>
404+
</pre>
405+
</div>
406+
355407
<div className="section">
356408
<h4 className="title">Theme and delay</h4>
357409
<p className="sub-title" />
@@ -374,7 +426,7 @@ export default class App extends Component {
374426
<a data-for="custom-theme" data-tip="custom theme">
375427
(･ω´･ )
376428
</a>
377-
<ReactTooltip id="custom-theme" className="customeTheme" />
429+
<ReactTooltip id="custom-theme" className="customTheme" />
378430
</div>
379431
</div>
380432
<br />
@@ -396,8 +448,8 @@ export default class App extends Component {
396448
<div>
397449
<p>
398450
{"<a data-tip='custom theme'>(･ω´･ )</a>\n" +
399-
"<ReactTooltip className='customeTheme'/>\n" +
400-
' .customeTheme {\n' +
451+
"<ReactTooltip className='customTheme'/>\n" +
452+
' .customTheme {\n' +
401453
' color: #ff6e00 !important;\n' +
402454
' background-color: orange !important;\n' +
403455
' &.place-top {\n' +
@@ -479,7 +531,7 @@ export default class App extends Component {
479531
</div>
480532
<ReactTooltip
481533
id="enrich"
482-
getContent={dataTip => 'This little buddy is ' + dataTip}
534+
getContent={(dataTip) => 'This little buddy is ' + dataTip}
483535
/>
484536
</div>
485537
<br />
@@ -693,7 +745,7 @@ export default class App extends Component {
693745

694746
<ReactTooltip
695747
id="soclose"
696-
getContent={dataTip => (
748+
getContent={(dataTip) => (
697749
<div>
698750
<h3>This little buddy is {dataTip}</h3>
699751
<p>Put mouse here</p>

‎example/src/index.css‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
html, body {
1+
html,
2+
body {
23
margin: 0px;
34
padding: 0px;
45
min-width: 1024px;
@@ -45,7 +46,7 @@ html, body {
4546
border: 1px solid #333;
4647
}
4748
.demonstration a:after {
48-
content: "hover on me";
49+
content: 'hover on me';
4950
text-align: center;
5051
color: rgba(0, 0, 0, 0.25);
5152
position: absolute;
@@ -102,11 +103,13 @@ html, body {
102103
display: inline-block;
103104
padding-left: 3px;
104105
}
105-
.control-panel .button-group .item a.active, .control-panel .button-group .item a:hover {
106+
.control-panel .button-group .item a.active,
107+
.control-panel .button-group .item a:hover {
106108
color: #fff;
107109
background: #1182dd;
108110
}
109-
.control-panel .button-group .item a.active .mark, .control-panel .button-group .item a:hover .mark {
111+
.control-panel .button-group .item a.active .mark,
112+
.control-panel .button-group .item a:hover .mark {
110113
color: rgba(255, 255, 255, 0.6);
111114
}
112115
.control-panel pre {
@@ -217,11 +220,11 @@ html, body {
217220
visibility: visible !important;
218221
opacity: 1 !important;
219222
}
220-
.customeTheme {
223+
.customTheme {
221224
color: #ff6e00 !important;
222225
background-color: orange !important;
223226
}
224-
.customeTheme.place-top:after {
227+
.customTheme.place-top:after {
225228
border-top-color: orange !important;
226229
border-top-style: solid !important;
227230
border-top-width: 6px !important;

‎example/src/index.scss‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
html, body{
2-
margin:0px;
3-
padding:0px;
1+
html,
2+
body {
3+
margin: 0px;
4+
padding: 0px;
45
min-width: 1024px;
56
}
67
.tooltip-example {
@@ -21,32 +22,32 @@ html, body{
2122
width: 600px;
2223
height: 150px;
2324
margin: 10px auto;
24-
background: rgba(0,0,0,0.1);
25+
background: rgba(0, 0, 0, 0.1);
2526
border-radius: 5px;
2627
box-sizing: border-box;
2728
position: relative;
2829
$wd: 60px;
29-
a{
30+
a {
3031
display: block;
3132
width: $wd;
3233
height: $wd;
3334
line-height: $wd;
3435
border-radius: $wd;
3536
text-align: center;
3637
color: #222;
37-
background: rgba(255,255,255,1);
38+
background: rgba(255, 255, 255, 1);
3839
position: absolute;
3940
left: 50%;
4041
top: 50%;
41-
margin-left: - $wd / 2;
42-
margin-top: - $wd / 2 - 15;
42+
margin-left: -$wd / 2;
43+
margin-top: -$wd / 2 - 15;
4344
cursor: pointer;
44-
box-shadow: 3px 4px 3px rgba(0,0,0,0.5);
45+
box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.5);
4546
border: 1px solid #333;
4647
&:after {
47-
content: "hover on me";
48+
content: 'hover on me';
4849
text-align: center;
49-
color: rgba(0,0,0,0.25);
50+
color: rgba(0, 0, 0, 0.25);
5051
position: absolute;
5152
width: 100px;
5253
top: 45px;
@@ -55,55 +56,56 @@ html, body{
5556
}
5657
}
5758
.control-panel {
58-
background: rgba(255,255,255,0.4);
59-
border-top: 1px solid rgba(0,0,0,0.2);
59+
background: rgba(255, 255, 255, 0.4);
60+
border-top: 1px solid rgba(0, 0, 0, 0.2);
6061
position: absolute;
61-
bottom:0px;
62-
left:0px;
63-
right:0px;
62+
bottom: 0px;
63+
left: 0px;
64+
right: 0px;
6465
width: 100%;
6566
height: 230px;
6667
overflow: auto;
6768
&:after {
6869
content: '';
69-
height:0px;
70-
display:block;
71-
clear:both;
70+
height: 0px;
71+
display: block;
72+
clear: both;
7273
}
7374
.button-group {
7475
box-sizing: border-box;
7576
width: 55%;
7677
float: left;
7778
padding-left: 10px;
7879
.item {
79-
padding:3px 2px;
80-
clear:both;
81-
p{
80+
padding: 3px 2px;
81+
clear: both;
82+
p {
8283
margin: 10px 0px 2px;
8384
font-size: 18px;
8485
color: #777;
8586
}
86-
a{
87+
a {
8788
border-radius: 3px;
8889
text-align: center;
8990
cursor: pointer;
9091
transition: background 0.25s ease-out;
9192
background: #e8e8e8;
92-
float:left;
93+
float: left;
9394
margin-right: 8px;
9495
padding: 7px 10px;
9596
font-size: 14px;
96-
.mark{
97+
.mark {
9798
color: #888;
9899
font-size: 13px;
99100
display: inline-block;
100101
padding-left: 3px;
101102
}
102-
&.active, &:hover {
103+
&.active,
104+
&:hover {
103105
color: #fff;
104-
background: #1182DD;
106+
background: #1182dd;
105107
.mark {
106-
color: rgba(255,255,255,0.6);
108+
color: rgba(255, 255, 255, 0.6);
107109
}
108110
}
109111
}
@@ -114,8 +116,8 @@ html, body{
114116
width: 45%;
115117
float: left;
116118
div {
117-
background: rgba(255,255,255,0.8);
118-
margin:0px 20px;
119+
background: rgba(255, 255, 255, 0.8);
120+
margin: 0px 20px;
119121
padding: 8px 12px;
120122
}
121123
.label {
@@ -166,7 +168,7 @@ html, body{
166168
width: $width;
167169
height: $width;
168170
border: 1px solid #999;
169-
border-radius: 0px
171+
border-radius: 0px;
170172
}
171173
}
172174
.side {
@@ -209,7 +211,7 @@ html, body{
209211

210212
.example-pre {
211213
border-radius: 2px;
212-
border: 1px solid rgba(0,0,0,0.2);
214+
border: 1px solid rgba(0, 0, 0, 0.2);
213215
box-sizing: border-box;
214216
padding: 10px;
215217
margin-bottom: 60px;
@@ -226,10 +228,10 @@ html, body{
226228
&:hover {
227229
visibility: visible !important;
228230
opacity: 1 !important;
229-
}
231+
}
230232
}
231233

232-
.customeTheme {
234+
.customTheme {
233235
color: #ff6e00 !important;
234236
background-color: orange !important;
235237
&.place-top {
@@ -239,4 +241,4 @@ html, body{
239241
border-top-width: 6px !important;
240242
}
241243
}
242-
}
244+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-tooltip",
3-
"version": "4.4.2",
3+
"version": "4.4.3",
44
"description": "react tooltip component",
55
"private": false,
66
"main": "dist/index.js",

‎src/decorators/defaultStyles.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,8 @@ export function getDefaultPopupColors(type) {
4545
}
4646

4747
export const DEFAULT_PADDING = '8px 21px';
48+
49+
export const DEFAULT_RADIUS = {
50+
tooltip: 3,
51+
arrow: 0
52+
};

0 commit comments

Comments
 (0)