Skip to content

Commit 9cbc111

Browse files
bplok20010bplok20010
committed
v1.0
1 parent a4d26f8 commit 9cbc111

10 files changed

+288
-18
lines changed

‎README.md

+252-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,252 @@
1-
# tooltip
1+
# tooltip
2+
3+
Tooltip组件
4+
5+
## 安装
6+
7+
`npm install --save react-widget-tooltip`
8+
9+
10+
## 使用
11+
12+
[![Edit elated-montalcini-7mici](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/elated-montalcini-7mici?fontsize=14&hidenavigation=1&theme=dark)
13+
14+
```js
15+
import React from "react";
16+
import Tooltip from "react-widget-tooltip";
17+
import "react-widget-tooltip/style";
18+
import "./styles.css";
19+
20+
export default function App() {
21+
return (
22+
<div
23+
className="App"
24+
style={{
25+
padding: 100
26+
}}
27+
>
28+
<Tooltip
29+
title="...Tooltip..."
30+
>
31+
<button>试试</button>
32+
</Trigger>
33+
</div>
34+
);
35+
}
36+
37+
```
38+
39+
### Interfaces
40+
41+
```ts
42+
export interface TooltipProps extends Omit<TriggerProps, "popup" | "defaultPopupVisible" | "popupVisible" | "destroyPopupOnHide" | "action" | "popupTransition" | "adjustPosition"> {
43+
/** 提示文字 */
44+
title?: React.ReactNode | (() => React.ReactNode);
45+
/** 提示框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom */
46+
placement?: TriggerProps["placement"];
47+
/** 默认是否显隐 */
48+
defaultVisible?: boolean;
49+
/** 用于手动控制浮层显隐，受控 */
50+
visible?: boolean;
51+
/** 触发行为，可选 "click" | "contextMenu" | "focus" | "hover" 可使用数组设置多个触发行为 */
52+
trigger?: TriggerProps["action"];
53+
/** 提示框偏移量 */
54+
offset?: number;
55+
/** 是否显示提示箭头 */
56+
visibleArrow?: boolean;
57+
/** 箭头大小，默认为：6 */
58+
arrowSize?: number;
59+
/** 箭头保持在中间 */
60+
keepArrowAtCenter?: boolean;
61+
/** 关闭后是否销毁 */
62+
destroyTooltipOnHide?: boolean;
63+
/** 提示动画，参考 react-transition-group*/
64+
transition?: TriggerProps["popupTransition"];
65+
/** 显示隐藏的回调 */
66+
onVisibleChange?: (visible: boolean) => void;
67+
}
68+
```
69+
70+
其他参数 [trigger](https://github.com/react-widget/trigger)
71+
72+
### defaultProps
73+
```js
74+
{
75+
prefixCls: "rw-tooltip",
76+
placement: "top",
77+
defaultVisible: false,
78+
visibleArrow: true,
79+
keepArrowAtCenter: false,
80+
destroyTooltipOnHide: true,
81+
arrowSize: 6,
82+
offset: 0,
83+
delay: 100,
84+
trigger: ["hover"],
85+
outsideHideEventName: ["mousedown", "click"],
86+
transition: {
87+
classNames: {
88+
appear: "tooltip-animated",
89+
appearActive: "tooltip-fade-in",
90+
appearDone: "",
91+
enter: "tooltip-animated",
92+
enterActive: "tooltip-fade-in",
93+
enterDone: "",
94+
exit: "tooltip-animated",
95+
exitActive: "tooltip-fade-out",
96+
exitDone: "",
97+
},
98+
timeout: 300,
99+
},
100+
}
101+
```
102+
103+
### 基础样式
104+
105+
```css
106+
.rw-tooltip-root {
107+
position: absolute;
108+
left: 0;
109+
right: 0;
110+
top: 0;
111+
}
112+
113+
.rw-tooltip {
114+
position: absolute;
115+
left: 0;
116+
top: 0;
117+
font-size: 14px;
118+
z-index: 2000;
119+
}
120+
121+
.rw-tooltip-mask {
122+
position: fixed;
123+
left: 0;
124+
top: 0;
125+
right: 0;
126+
bottom: 0;
127+
background: #000;
128+
opacity: 0.1;
129+
z-index: 2000;
130+
}
131+
132+
.rw-tooltip-inner {
133+
position: relative;
134+
min-width: 30px;
135+
min-height: 32px;
136+
padding: 6px 8px;
137+
color: #fff;
138+
text-align: left;
139+
text-decoration: none;
140+
word-wrap: break-word;
141+
background-color: rgba(0, 0, 0, 0.9);
142+
border-radius: 2px;
143+
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
144+
box-sizing: border-box;
145+
}
146+
147+
.rw-tooltip-arrow {
148+
position: absolute;
149+
width: 0;
150+
height: 0;
151+
border-color: transparent;
152+
border-style: solid;
153+
154+
box-sizing: border-box;
155+
}
156+
157+
.rw-tooltip-placement-top > .rw-tooltip-arrow,
158+
.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
159+
.rw-tooltip-placement-top-right > .rw-tooltip-arrow {
160+
bottom: -5px;
161+
border-width: 5px 5px 0;
162+
border-top-color: rgba(0, 0, 0, 0.9);
163+
}
164+
165+
.rw-tooltip-placement-bottom > .rw-tooltip-arrow,
166+
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow,
167+
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
168+
top: -5px;
169+
border-width: 0 5px 5px;
170+
border-bottom-color: rgba(0, 0, 0, 0.9);
171+
}
172+
173+
.rw-tooltip-placement-left > .rw-tooltip-arrow,
174+
.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
175+
.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow {
176+
right: -5px;
177+
border-width: 5px 0 5px 5px;
178+
border-left-color: rgba(0, 0, 0, 0.9);
179+
}
180+
181+
.rw-tooltip-placement-right > .rw-tooltip-arrow,
182+
.rw-tooltip-placement-right-top > .rw-tooltip-arrow,
183+
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
184+
left: -5px;
185+
border-width: 5px 5px 5px 0;
186+
border-right-color: rgba(0, 0, 0, 0.9);
187+
}
188+
189+
.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
190+
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow {
191+
left: 16px;
192+
}
193+
194+
.rw-tooltip-placement-top > .rw-tooltip-arrow,
195+
.rw-tooltip-placement-bottom > .rw-tooltip-arrow {
196+
left: 50%;
197+
margin-left: -5px;
198+
}
199+
200+
.rw-tooltip-placement-top-right > .rw-tooltip-arrow,
201+
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
202+
right: 16px;
203+
}
204+
205+
.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
206+
.rw-tooltip-placement-right-top > .rw-tooltip-arrow {
207+
top: 8px;
208+
}
209+
210+
.rw-tooltip-placement-left > .rw-tooltip-arrow,
211+
.rw-tooltip-placement-right > .rw-tooltip-arrow {
212+
top: 50%;
213+
margin-top: -5px;
214+
}
215+
216+
.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow,
217+
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
218+
bottom: 8px;
219+
}
220+
221+
.tooltip-animated {
222+
animation-duration: 0.3s;
223+
}
224+
225+
.tooltip-fade-in {
226+
animation-name: TooltipFadeIn;
227+
}
228+
229+
.tooltip-fade-out {
230+
animation-name: TooltipFadeOut;
231+
}
232+
233+
@keyframes TooltipFadeIn {
234+
from {
235+
opacity: 0;
236+
}
237+
238+
to {
239+
opacity: 1;
240+
}
241+
}
242+
@keyframes TooltipFadeOut {
243+
from {
244+
opacity: 1;
245+
}
246+
247+
to {
248+
opacity: 0;
249+
}
250+
}
251+
252+
```

‎docs/asset-manifest.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"index.css": "static/css/index.4ca12b27.chunk.css",
3+
"index.js": "static/js/index.4ca12b27.chunk.js",
4+
"runtime-index.js": "static/js/runtime-index.92eae014.js",
5+
"static/js/2.b694e620.chunk.js": "static/js/2.b694e620.chunk.js",
6+
"index.html": "index.html"
7+
}

‎docs/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.4ca12b27.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.b694e620.chunk.js"></script><script src="static/js/index.4ca12b27.chunk.js"></script></body></html>

‎docs/static/css/index.4ca12b27.chunk.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/2.b694e620.chunk.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/index.4ca12b27.chunk.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/runtime-index.92eae014.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)