Skip to content

Commit b00dc56

Browse files
Go7hicGo7hic
committed
feat: update
1 parent a59bdf1 commit b00dc56

File tree

3 files changed

+240
-28
lines changed

3 files changed

+240
-28
lines changed

‎example/index.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
import React from 'react';
22
import ReactDom from 'react-dom';
3-
import AReactComponent from '../src';
3+
import ReactCssTooltip from '../src';
44

55
class App extends React.Component<any> {
66
public render() {
77
return (
8-
<div>
9-
<AReactComponent hello="hello" />
8+
<div style={{ margin: '100px' }}>
9+
<ReactCssTooltip style={{ marginRight: '10px' }} placement="top" text="tooltip top">
10+
测试
11+
</ReactCssTooltip>
12+
<ReactCssTooltip style={{ marginRight: '10px' }} placement="left" text="tooltip top">
13+
测试
14+
</ReactCssTooltip>
15+
<ReactCssTooltip style={{ marginRight: '10px' }} placement="bottom" text="tooltip top">
16+
测试
17+
</ReactCssTooltip>
18+
<ReactCssTooltip style={{ marginRight: '10px' }} placement="right" text="tooltip top">
19+
测试
20+
</ReactCssTooltip>
1021
</div>
1122
);
1223
}

‎src/index.less

+216-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,217 @@
1-
2-
.a-react-component {
1+
.tooltip {
32
position: relative;
4-
height: 64px;
5-
line-height: 64px;
6-
padding: 0;
7-
background: #fff;
8-
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
9-
text-align: center;
10-
}
3+
&:before {
4+
position: absolute;
5+
z-index: 1000001;
6+
display: none;
7+
width: 0;
8+
height: 0;
9+
color: rgba(0, 0, 0, 0.8);
10+
pointer-events: none;
11+
content: "";
12+
border: 5px solid transparent
13+
}
14+
&:after {
15+
position: absolute;
16+
z-index: 1000000;
17+
display: none;
18+
padding: 5px 8px;
19+
color: #fff;
20+
text-align: center;
21+
text-decoration: none;
22+
text-shadow: none;
23+
text-transform: none;
24+
letter-spacing: normal;
25+
word-wrap: break-word;
26+
white-space: pre;
27+
pointer-events: none;
28+
content: attr(aria-label);
29+
background: rgba(0, 0, 0, 0.8);
30+
border-radius: 3px;
31+
}
32+
&:hover, &:active, &:focus {
33+
&:before, &:after {
34+
display: inline-block;
35+
text-decoration: none;
36+
}
37+
}
38+
&.primary {
39+
&:after {
40+
background: #286090;
41+
}
42+
}
43+
&.success {
44+
&:after {
45+
background: #449d44;
46+
}
47+
}
48+
&.warn {
49+
&:after {
50+
background: #ec971f;
51+
}
52+
}
53+
&.danger {
54+
&:after {
55+
background: #c9302c;
56+
}
57+
}
58+
&.top {
59+
&:before {
60+
top: -5px;
61+
right: 50%;
62+
bottom: auto;
63+
margin-right: -5px;
64+
border-top-color: rgba(0, 0, 0, 0.8);
65+
}
66+
&.primary {
67+
&:before {
68+
border-top-color: #286090;
69+
}
70+
}
71+
&.success {
72+
&:before {
73+
border-top-color: #449d44;
74+
}
75+
}
76+
77+
&.warn {
78+
&:before {
79+
border-top-color: #ec971f;
80+
}
81+
}
82+
&.danger {
83+
&:before {
84+
border-top-color: #c9302c;
85+
}
86+
}
87+
&:after {
88+
right: 50%;
89+
bottom: 100%;
90+
margin-bottom: 5px;
91+
-webkit-transform: translateX(50%);
92+
-moz-transform: translateX(50%);
93+
-ms-transform: translateX(50%);
94+
transform: translateX(50%);
95+
}
96+
}
97+
&.right {
98+
&:before {
99+
top: 50%;
100+
right: -5px;
101+
bottom: 50%;
102+
margin-top: -5px;
103+
border-right-color: rgba(0, 0, 0, 0.8);
104+
}
105+
&.primary {
106+
&:before {
107+
border-right-color: #286090;
108+
}
109+
}
110+
&.success {
111+
&:before {
112+
border-right-color: #449d44;
113+
}
114+
}
115+
116+
&.warn {
117+
&:before {
118+
border-right-color: #ec971f;
119+
}
120+
}
121+
&.danger {
122+
&:before {
123+
border-right-color: #c9302c;
124+
}
125+
}
126+
&:after {
127+
top: 50%;
128+
left: 100%;
129+
margin-left: 5px;
130+
-webkit-transform: translateY(-50%);
131+
-moz-transform: translateY(-50%);
132+
-ms-transform: translateY(-50%);
133+
transform: translateY(-50%);
134+
}
135+
}
136+
&.bottom {
137+
&:before {
138+
top: auto;
139+
right: 50%;
140+
bottom: -5px;
141+
margin-right: -5px;
142+
border-bottom-color: rgba(0, 0, 0, 0.8);
143+
}
144+
&.primary {
145+
&:before {
146+
border-bottom-color: #286090;
147+
}
148+
}
149+
&.success {
150+
&:before {
151+
border-bottom-color: #449d44;
152+
}
153+
}
154+
155+
&.warn {
156+
&:before {
157+
border-bottom-color: #ec971f;
158+
}
159+
}
160+
&.danger {
161+
&:before {
162+
border-bottom-color: #c9302c;
163+
}
164+
}
165+
&:after {
166+
top: 100%;
167+
right: 50%;
168+
margin-top: 5px;
169+
-webkit-transform: translateX(50%);
170+
-moz-transform: translateX(50%);
171+
-ms-transform: translateX(50%);
172+
transform: translateX(50%);
173+
}
174+
}
175+
&.left {
176+
&:before {
177+
right: 100%;
178+
bottom: 50%;
179+
margin-right: -5px;
180+
border-left-color: rgba(0, 0, 0, 0.8);
181+
-webkit-transform: translateY(50%);
182+
-moz-transform: translateY(50%);
183+
-ms-transform: translateY(50%);
184+
transform: translateY(50%);
185+
}
186+
&.primary {
187+
&:before {
188+
border-left-color: #286090;
189+
}
190+
}
191+
&.success {
192+
&:before {
193+
border-left-color: #449d44;
194+
}
195+
}
196+
197+
&.warn {
198+
&:before {
199+
border-left-color: #ec971f;
200+
}
201+
}
202+
&.danger {
203+
&:before {
204+
border-left-color: #c9302c;
205+
}
206+
}
207+
&:after {
208+
top: 50%;
209+
right: 100%;
210+
margin-right: 5px;
211+
-webkit-transform: translateY(-50%);
212+
-moz-transform: translateY(-50%);
213+
-ms-transform: translateY(-50%);
214+
transform: translateY(-50%);
215+
}
216+
}
217+
}

‎src/index.tsx

+10-16
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,21 @@
1-
import React, { ChangeEvent } from 'react';
1+
import React, { ChangeEvent, ElementType } from 'react';
22

33
import './index.less';
44

55
interface IProps {
6-
hello: string;
6+
placement: string;
7+
text: string;
8+
style?: object;
79
}
810

9-
export default class AReactComponent extends React.Component<IProps, { value: string }> {
10-
public readonly state = {
11-
value: '',
12-
};
13-
public handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
14-
this.setState({ value: e.target.value });
15-
};
11+
export default class ReactCssTooltip extends React.Component<IProps> {
1612
public render() {
13+
const { placement, text, children, style } = this.props;
14+
1715
return (
18-
<div className="a-react-component">
19-
AReactComponent
20-
<div>
21-
<input value={this.state.value} onChange={this.handleChange} />
22-
</div>
23-
{this.props.hello}:{this.state.value}
24-
</div>
16+
<a className={`tooltip ${placement}`} style={style} aria-label={text}>
17+
{children}
18+
</a>
2519
);
2620
}
2721
}

0 commit comments

Comments
 (0)