Skip to content

Commit 33c012b

Browse files
danielbariondanielbarion
committed
chore: update project to have v4 docs together
1 parent 8b2a15d commit 33c012b

37 files changed

+1451
-622
lines changed

‎example-v5/.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# system files
2+
*.log
3+
.DS_Store*
4+
.idea/
5+
6+
*.lock
7+
8+
/node_modules/

‎example-v5/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "react-tooltip-example",
3+
"homepage": "https://reacttooltip.github.io/react-tooltip/",
4+
"version": "1.0.0",
5+
"license": "MIT",
6+
"dependencies": {
7+
"gh-pages": "^2.1.1",
8+
"react": "link:../node_modules/react",
9+
"react-dom": "link:../node_modules/react-dom",
10+
"react-scripts": "5.0.1",
11+
"react-tooltip": "link:.."
12+
},
13+
"scripts": {
14+
"start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
15+
"build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
16+
"test": "DISABLE_ESLINT_PLUGIN=true react-scripts test --env=jsdom",
17+
"eject": "react-scripts eject",
18+
"predeploy": "yarn build",
19+
"deploy": "gh-pages -d build"
20+
}
21+
}

‎example-v5/public/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
8+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9+
10+
<title>react-tooltip</title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
You need to enable JavaScript to run this app.
16+
</noscript>
17+
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎example-v5/public/manifest.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"short_name": "react-tooltip",
3+
"name": "react-tooltip",
4+
"start_url": "./index.html",
5+
"display": "standalone",
6+
"theme_color": "#000000",
7+
"background_color": "#ffffff"
8+
}

‎example/src/App.jsx ‎example-v5/src/App.jsx

File renamed without changes.

‎example-v5/src/index.css

+238
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
html,
2+
body {
3+
margin: 0px;
4+
padding: 0px;
5+
min-width: 1024px;
6+
letter-spacing: 0.05rem;
7+
}
8+
.tooltip-example {
9+
background: #1182dd;
10+
height: 900px;
11+
position: relative;
12+
}
13+
.tooltip-example .title {
14+
color: #fff;
15+
padding-top: 50px;
16+
margin-top: 0px;
17+
font-size: 45px;
18+
text-align: center;
19+
margin-bottom: 20px;
20+
font-weight: 700;
21+
}
22+
.demonstration {
23+
width: 600px;
24+
height: 150px;
25+
margin: 10px auto;
26+
background: rgba(0, 0, 0, 0.1);
27+
border-radius: 5px;
28+
box-sizing: border-box;
29+
position: relative;
30+
}
31+
.demonstration a {
32+
display: block;
33+
width: 60px;
34+
height: 60px;
35+
line-height: 60px;
36+
border-radius: 60px;
37+
text-align: center;
38+
color: #222;
39+
background: rgba(255, 255, 255, 1);
40+
position: absolute;
41+
left: 50%;
42+
top: 50%;
43+
margin-left: -30px;
44+
margin-top: -15px;
45+
cursor: pointer;
46+
box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.5);
47+
border: 1px solid #333;
48+
}
49+
.demonstration a:after {
50+
content: 'hover on me';
51+
text-align: center;
52+
color: rgba(0, 0, 0, 0.25);
53+
position: absolute;
54+
width: 100px;
55+
top: 45px;
56+
left: -18px;
57+
}
58+
.control-panel {
59+
background: rgba(255, 255, 255, 0.4);
60+
border-top: 1px solid rgba(0, 0, 0, 0.2);
61+
position: absolute;
62+
bottom: 0px;
63+
left: 0px;
64+
right: 0px;
65+
width: 100%;
66+
height: auto;
67+
padding-bottom: 30px;
68+
overflow: auto;
69+
}
70+
.control-panel:after {
71+
content: '';
72+
height: 0px;
73+
display: block;
74+
clear: both;
75+
}
76+
.control-panel .button-group {
77+
box-sizing: border-box;
78+
width: 55%;
79+
float: left;
80+
padding-left: 10px;
81+
}
82+
.control-panel .button-group .item {
83+
padding: 3px 2px;
84+
clear: both;
85+
}
86+
.control-panel .button-group .item p {
87+
margin: 10px 0px 2px;
88+
font-size: 18px;
89+
color: black;
90+
}
91+
.control-panel .button-group .item a {
92+
border-radius: 3px;
93+
text-align: center;
94+
cursor: pointer;
95+
transition: background 0.25s ease-out;
96+
background: #e8e8e8;
97+
float: left;
98+
margin-right: 8px;
99+
padding: 7px 10px;
100+
font-size: 14px;
101+
}
102+
.control-panel .button-group .item a .mark {
103+
color: #888;
104+
font-size: 13px;
105+
display: inline-block;
106+
padding-left: 3px;
107+
}
108+
.control-panel .button-group .item a.active,
109+
.control-panel .button-group .item a:hover {
110+
color: #fff;
111+
background: #1182dd;
112+
}
113+
.control-panel .button-group .item a.active .mark,
114+
.control-panel .button-group .item a:hover .mark {
115+
color: rgba(255, 255, 255, 0.6);
116+
}
117+
.control-panel pre {
118+
box-sizing: border-box;
119+
width: 45%;
120+
float: left;
121+
}
122+
.control-panel pre div {
123+
background: rgba(255, 255, 255, 0.8);
124+
margin: 0px 20px;
125+
padding: 8px 12px;
126+
}
127+
.control-panel pre .label {
128+
margin: 10px 0px 2px;
129+
font-size: 18px;
130+
color: #777;
131+
}
132+
.advance .title {
133+
color: #222;
134+
padding-top: 100px;
135+
margin-top: 0px;
136+
font-size: 30px;
137+
text-align: center;
138+
margin-bottom: 20px;
139+
font-weight: 700;
140+
}
141+
.advance .sub-title {
142+
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
143+
color: #666;
144+
font-size: 20px;
145+
padding-bottom: 5px;
146+
}
147+
.advance .section {
148+
width: 800px;
149+
margin: 20px auto;
150+
}
151+
.example-jsx {
152+
padding: 10px 0px;
153+
height: 50px;
154+
}
155+
.example-jsx:after {
156+
content: '';
157+
clear: both;
158+
height: 0;
159+
visibility: hidden;
160+
}
161+
.example-jsx .block {
162+
float: left;
163+
}
164+
.example-jsx .block a {
165+
text-align: center;
166+
width: 55px;
167+
height: 55px;
168+
border: 1px solid #999;
169+
border-radius: 0px;
170+
}
171+
.example-jsx .side {
172+
width: 50%;
173+
float: left;
174+
box-sizing: border-box;
175+
}
176+
.example-jsx .side-3 {
177+
width: 33.333%;
178+
float: left;
179+
box-sizing: border-box;
180+
}
181+
.example-jsx a {
182+
text-align: center;
183+
width: 55px;
184+
height: 55px;
185+
line-height: 55px;
186+
border-radius: 55px;
187+
display: block;
188+
margin: auto;
189+
cursor: pointer;
190+
color: #999;
191+
border: 1px solid #999;
192+
font-size: 13px;
193+
}
194+
.example-jsx a:hover {
195+
color: #222;
196+
border: 1px solid #222;
197+
}
198+
.example-jsx p {
199+
margin-bottom: 2px;
200+
padding: 0px;
201+
}
202+
.example-jsx ul {
203+
padding: 0px;
204+
list-style: none;
205+
}
206+
.example-jsx ul li {
207+
padding-left: 10px;
208+
margin: 0px;
209+
text-align: left;
210+
}
211+
.example-pre {
212+
border-radius: 2px;
213+
border: 1px solid rgba(0, 0, 0, 0.2);
214+
box-sizing: border-box;
215+
padding: 10px;
216+
margin-bottom: 60px;
217+
font-size: 14px;
218+
}
219+
.example-pre p {
220+
line-height: 30px;
221+
}
222+
.extraClass {
223+
font-size: 20px;
224+
background-color: #00ffe5;
225+
color: #222;
226+
}
227+
.extraClass .extraClassArrow {
228+
background-color: #00ffe5;
229+
}
230+
.customTheme {
231+
color: #ff6e00;
232+
background-color: orange;
233+
}
234+
.customTheme.place-top:after {
235+
border-top-color: orange;
236+
border-top-style: solid;
237+
border-top-width: 6px;
238+
}

‎example-v5/src/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { StrictMode, version } from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import 'react-tooltip/dist/react-tooltip.css'
4+
import './index.css'
5+
import App from './App'
6+
7+
console.log('Examples folder loaded React version: ', version)
8+
9+
const container = document.getElementById('root')
10+
const root = createRoot(container)
11+
root.render(
12+
<StrictMode>
13+
<App />
14+
</StrictMode>,
15+
)

0 commit comments

Comments
 (0)