Skip to content

Commit c5374d7

Browse files
zombieJzombieJ
authored
docs: site doc (#450)
1 parent a6285d1 commit c5374d7

File tree

4 files changed

+38
-147
lines changed

4 files changed

+38
-147
lines changed

‎.dumirc.ts

+8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import { defineConfig } from 'dumi';
22
import path from 'path';
33

4+
const isProdSite =
5+
// 不是预览模式 同时是生产环境
6+
process.env.PREVIEW !== 'true' && process.env.NODE_ENV === 'production';
7+
8+
const name = 'tooltip';
9+
410
export default defineConfig({
511
alias: {
612
'rc-tooltip$': path.resolve('src'),
@@ -12,4 +18,6 @@ export default defineConfig({
1218
name: 'Tooltip',
1319
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
1420
},
21+
base: isProdSite ? `/${name}/` : '/',
22+
publicPath: isProdSite ? `/${name}/` : '/',
1523
});

‎README.md

+26-143
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
React Tooltip
44

5-
[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
5+
[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
66

77
[npm-image]: https://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square
88
[npm-url]: https://npmjs.org/package/rc-tooltip
@@ -24,9 +24,8 @@ React Tooltip
2424
## Browsers support
2525

2626
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
27-
| --------- | --------- | --------- | --------- | --------- |
28-
| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ |
29-
27+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
28+
| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ |
3029

3130
## Install
3231

@@ -47,7 +46,7 @@ ReactDOM.render(
4746
<Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
4847
<a href="#">hover</a>
4948
</Tooltip>,
50-
container
49+
container,
5150
);
5251
```
5352

@@ -62,144 +61,26 @@ Online examples: <https://react-component.github.io/tooltip/examples/>
6261

6362
### Props
6463

65-
<table class="table table-bordered table-striped">
66-
<thead>
67-
<tr>
68-
<th style="width: 100px;">name</th>
69-
<th style="width: 50px;">type</th>
70-
<th style="width: 50px;">default</th>
71-
<th>description</th>
72-
</tr>
73-
</thead>
74-
<tbody>
75-
<tr>
76-
<td>overlayClassName</td>
77-
<td>string</td>
78-
<td></td>
79-
<td>additional className added to popup overlay</td>
80-
</tr>
81-
<tr>
82-
<td>trigger</td>
83-
<td>string | string[]</td>
84-
<td>['hover']</td>
85-
<td>which actions cause tooltip shown. enum of 'hover','click','focus'</td>
86-
</tr>
87-
<tr>
88-
<td>mouseEnterDelay</td>
89-
<td>number</td>
90-
<td>0</td>
91-
<td>delay time to show when mouse enter.unit: s.</td>
92-
</tr>
93-
<tr>
94-
<td>mouseLeaveDelay</td>
95-
<td>number</td>
96-
<td>0.1</td>
97-
<td>delay time to hide when mouse leave.unit: s.</td>
98-
</tr>
99-
<tr>
100-
<td>overlayStyle</td>
101-
<td>Object</td>
102-
<td></td>
103-
<td>additional style of overlay node</td>
104-
</tr>
105-
<tr>
106-
<td>prefixCls</td>
107-
<td>String</td>
108-
<td>rc-tooltip</td>
109-
<td>prefix class name</td>
110-
</tr>
111-
<tr>
112-
<td>transitionName</td>
113-
<td>String|Object</td>
114-
<td></td>
115-
<td>same as https://github.com/react-component/animate</td>
116-
</tr>
117-
<tr>
118-
<td>onVisibleChange</td>
119-
<td>Function</td>
120-
<td></td>
121-
<td>call when visible is changed</td>
122-
</tr>
123-
<tr>
124-
<td>afterVisibleChange</td>
125-
<td>Function</td>
126-
<td></td>
127-
<td>call after visible is changed</td>
128-
</tr>
129-
<tr>
130-
<td>visible</td>
131-
<td>boolean</td>
132-
<td></td>
133-
<td>whether tooltip is visible</td>
134-
</tr>
135-
<tr>
136-
<td>defaultVisible</td>
137-
<td>boolean</td>
138-
<td></td>
139-
<td>whether tooltip is visible initially</td>
140-
</tr>
141-
<tr>
142-
<td>placement</td>
143-
<td>String</td>
144-
<td></td>
145-
<td>one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'rightTop', 'rightBottom', 'leftTop', 'leftBottom']</td>
146-
</tr>
147-
<tr>
148-
<td>align</td>
149-
<td>Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)</td>
150-
<td></td>
151-
<td>value will be merged into placement's config</td>
152-
</tr>
153-
<tr>
154-
<td>onPopupAlign</td>
155-
<td>function(popupDomNode, align)</td>
156-
<td></td>
157-
<td>callback when popup node is aligned</td>
158-
</tr>
159-
<tr>
160-
<td>overlay</td>
161-
<td>React.Element | () => React.Element</td>
162-
<td></td>
163-
<td>popup content</td>
164-
</tr>
165-
<tr>
166-
<td>overlayInnerStyle</td>
167-
<td>Object</td>
168-
<td></td>
169-
<td>set overlay inner style</td>
170-
</tr>
171-
<tr>
172-
<td>showArrow</td>
173-
<td>boolean | { className?: string }</td>
174-
<td>true</td>
175-
<td>arrow visible</td>
176-
</tr>
177-
<tr>
178-
<td>arrowContent</td>
179-
<td>React.Node</td>
180-
<td>null</td>
181-
<td>arrow content</td>
182-
</tr>
183-
<tr>
184-
<td>getTooltipContainer</td>
185-
<td>function</td>
186-
<td></td>
187-
<td>Function returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element.</td>
188-
</tr>
189-
<tr>
190-
<td>destroyTooltipOnHide</td>
191-
<td>boolean | { keepParent: boolean }</td>
192-
<td>false</td>
193-
<td>whether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it. Parent container will be removed include tooltip when keepParent is true</td>
194-
</tr>
195-
<tr>
196-
<td>id</td>
197-
<td>String</td>
198-
<td></td>
199-
<td>Id which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support.</td>
200-
</tr>
201-
</tbody>
202-
</table>
64+
| name | type | default | description |
65+
| -------------------- | ----------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
66+
| trigger | string \| string\[] | 'hover' | which actions cause tooltip shown. enum of 'hover','click','focus' |
67+
| visible | boolean | false | whether tooltip is visible |
68+
| defaultVisible | boolean | false | whether tooltip is visible by default |
69+
| placement | string | 'right' | tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom' |
70+
| motion | object | | Config popup motion. Please ref demo for example |
71+
| onVisibleChange | (visible: boolean) => void; | | Callback when visible change |
72+
| afterVisibleChange | (visible: boolean) => void; | | Callback after visible change |
73+
| overlay | ReactNode \| () => ReactNode | | tooltip overlay content |
74+
| overlayStyle | object | | style of tooltip overlay |
75+
| overlayClassName | string | | className of tooltip overlay |
76+
| prefixCls | string | 'rc-tooltip' | prefix class name of tooltip |
77+
| mouseEnterDelay | number | 0 | delay time (in second) before tooltip shows when mouse enter |
78+
| mouseLeaveDelay | number | 0.1 | delay time (in second) before tooltip hides when mouse leave |
79+
| getTooltipContainer | (triggerNode: HTMLElement) => HTMLElement | () => document.body | get container of tooltip, default to body |
80+
| destroyTooltipOnHide | boolean | false | destroy tooltip when it is hidden |
81+
| align | object | | align config of tooltip. Please ref demo for usage example |
82+
| showArrow | boolean \| object | false | whether to show arrow of tooltip |
83+
| zIndex | number | | config popup tooltip zIndex |
20384

20485
## Important Note
20586

@@ -208,6 +89,7 @@ Online examples: <https://react-component.github.io/tooltip/examples/>
20889
## Accessibility
20990

21091
For accessibility purpose you can use the `id` prop to link your tooltip with another element. For example attaching it to an input element:
92+
21193
```js
21294
<Tooltip
21395
...
@@ -217,6 +99,7 @@ For accessibility purpose you can use the `id` prop to link your tooltip with an
21799
aria-describedby={this.props.name}/>
218100
</Tooltip>
219101
```
102+
220103
If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.
221104

222105
**NOTE:** `role="tooltip"` is also added to expose the purpose of the tooltip element to a screenreader.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,11 @@
3232
"scripts": {
3333
"compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css",
3434
"docs:build": "dumi build",
35-
"docs:deploy": "gh-pages -d .doc",
35+
"docs:deploy": "gh-pages -d dist",
3636
"lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
3737
"now-build": "npm run build",
3838
"prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
39+
"postpublish": "npm run docs:build && npm run docs:deploy",
3940
"start": "dumi dev",
4041
"test": "rc-test"
4142
},

‎src/Tooltip.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { TriggerProps, TriggerRef, ArrowType } from '@rc-component/trigger';
1+
import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger';
22
import Trigger from '@rc-component/trigger';
33
import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface';
44
import * as React from 'react';
@@ -32,7 +32,6 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
3232
arrowContent?: React.ReactNode;
3333
id?: string;
3434
children?: React.ReactElement;
35-
popupVisible?: boolean;
3635
overlayInnerStyle?: React.CSSProperties;
3736
zIndex?: number;
3837
}
@@ -71,7 +70,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
7170
const triggerRef = useRef<TriggerRef>(null);
7271
useImperativeHandle(ref, () => triggerRef.current);
7372

74-
const extraProps = { ...restProps };
73+
const extraProps: Partial<TooltipProps & TriggerProps> = { ...restProps };
7574
if ('visible' in props) {
7675
extraProps.popupVisible = props.visible;
7776
}

0 commit comments

Comments
 (0)