You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
30 KiB
366 lines
30 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[3451],{663729:function(p,r,n){n.r(r);var m=n(502143),_=n(968521),v=n(720719),g=n(28840),Z=n(759907),l=n(828089),h=n(825673),f=n(902068),T=n(574399),b=n(863942),x=n(316073),B=n(24628),w=n(719260),E=n(956140),c=n(127179),a=n(905388),P=n(40428),y=n(606965),D=n(268696),k=n(587302),o=n(424128),A=n(249706),R=n(795127),L=n(116846),O=n(212039),M=n(73024),C=n(553913),i=n(606641),u=n(667294),t=n(370917);function d(){var s=(0,i.eL)(),e=s.texts;return(0,t.tZ)(i.dY,null,(0,t.tZ)(u.Fragment,null,(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,e[0].value),(0,t.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,t.tZ)("p",null,e[1].value),(0,t.tZ)("p",null,e[2].value,(0,t.tZ)("code",null,e[3].value),e[4].value,(0,t.tZ)("code",null,e[5].value),e[6].value),(0,t.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,t.tZ)(a.Z,{items:[{demo:{id:"components-tooltip-demo-basic"},previewerProps:{title:"\u57FA\u672C",filename:"components/tooltip/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Tooltip } from 'antd';
|
|
const App = () => (
|
|
<Tooltip title="prompt text">
|
|
<span>Tooltip will show on mouse enter.</span>
|
|
</Tooltip>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002</p>"}},{demo:{id:"components-tooltip-demo-placement"},previewerProps:{title:"\u4F4D\u7F6E",filename:"components/tooltip/demo/placement.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Tooltip } from 'antd';
|
|
import React from 'react';
|
|
const text = <span>prompt text</span>;
|
|
const buttonWidth = 70;
|
|
const App = () => (
|
|
<div>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
<Tooltip placement="topLeft" title={text}>
|
|
<Button>TL</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="top" title={text}>
|
|
<Button>Top</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="topRight" title={text}>
|
|
<Button>TR</Button>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
float: 'left',
|
|
}}
|
|
>
|
|
<Tooltip placement="leftTop" title={text}>
|
|
<Button>LT</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="left" title={text}>
|
|
<Button>Left</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="leftBottom" title={text}>
|
|
<Button>LB</Button>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
marginLeft: buttonWidth * 4 + 24,
|
|
}}
|
|
>
|
|
<Tooltip placement="rightTop" title={text}>
|
|
<Button>RT</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="right" title={text}>
|
|
<Button>Right</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="rightBottom" title={text}>
|
|
<Button>RB</Button>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
clear: 'both',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
<Tooltip placement="bottomLeft" title={text}>
|
|
<Button>BL</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="bottom" title={text}>
|
|
<Button>Bottom</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="bottomRight" title={text}>
|
|
<Button>BR</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u4F4D\u7F6E\u6709 12 \u4E2A\u65B9\u5411\u3002</p>",style:`#components-tooltip-demo-placement .ant-btn {
|
|
margin-left: 0;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
width: 70px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
#components-tooltip-demo-placement .ant-btn {
|
|
margin-left: 8px;
|
|
margin-right: 0;
|
|
}`}},{demo:{id:"components-tooltip-demo-arrow"},previewerProps:{title:"\u7BAD\u5934\u5C55\u793A",filename:"components/tooltip/demo/arrow.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Divider, Segmented, Tooltip } from 'antd';
|
|
import React, { useMemo, useState } from 'react';
|
|
const text = <span>prompt text</span>;
|
|
const buttonWidth = 70;
|
|
const gap = 8;
|
|
const btnProps = {
|
|
style: {
|
|
width: buttonWidth,
|
|
},
|
|
};
|
|
const App = () => {
|
|
const options = ['Show', 'Hide', 'Center'];
|
|
const [arrow, setArrow] = useState('Show');
|
|
const mergedArrow = useMemo(() => {
|
|
if (arrow === 'Hide') {
|
|
return false;
|
|
}
|
|
if (arrow === 'Show') {
|
|
return true;
|
|
}
|
|
return {
|
|
pointAtCenter: true,
|
|
};
|
|
}, [arrow]);
|
|
return (
|
|
<div className="demo">
|
|
<Segmented
|
|
value={arrow}
|
|
options={options}
|
|
onChange={(val) => {
|
|
setArrow(val);
|
|
}}
|
|
/>
|
|
<Divider orientation="center">Content</Divider>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
display: 'flex',
|
|
flexWrap: 'nowrap',
|
|
columnGap: gap,
|
|
}}
|
|
>
|
|
<Tooltip placement="topLeft" title={text} arrow={mergedArrow}>
|
|
<Button {...btnProps}>TL</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="top" title={text} arrow={mergedArrow}>
|
|
<Button {...btnProps}>Top</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="topRight" title={text} arrow={mergedArrow}>
|
|
<Button {...btnProps}>TR</Button>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
float: 'left',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
rowGap: gap,
|
|
}}
|
|
>
|
|
<Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
|
|
<Button>LT</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="left" title={text} arrow={mergedArrow}>
|
|
<Button>Left</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>
|
|
<Button>LB</Button>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
marginLeft: buttonWidth * 4 + 24,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
rowGap: gap,
|
|
}}
|
|
>
|
|
<Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
|
|
<Button>RT</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="right" title={text} arrow={mergedArrow}>
|
|
<Button>Right</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>
|
|
<Button>RB</Button>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
clear: 'both',
|
|
display: 'flex',
|
|
flexWrap: 'nowrap',
|
|
columnGap: gap,
|
|
}}
|
|
>
|
|
<Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>
|
|
<Button {...btnProps}>BL</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="bottom" title={text} arrow={mergedArrow}>
|
|
<Button {...btnProps}>Bottom</Button>
|
|
</Tooltip>
|
|
<Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>
|
|
<Button {...btnProps}>BR</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u652F\u6301\u663E\u793A\u3001\u9690\u85CF\u4EE5\u53CA\u5C06\u7BAD\u5934\u4FDD\u6301\u5C45\u4E2D\u5B9A\u4F4D\u3002</p>"}},{demo:{id:"components-tooltip-demo-shift"},previewerProps:{iframe:"200",title:"\u8D34\u8FB9\u504F\u79FB",filename:"components/tooltip/demo/shift.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Tooltip } from 'antd';
|
|
import React from 'react';
|
|
const App = () => {
|
|
React.useEffect(() => {
|
|
document.documentElement.scrollTop = document.documentElement.clientHeight;
|
|
document.documentElement.scrollLeft = document.documentElement.clientWidth;
|
|
}, []);
|
|
return (
|
|
<div>
|
|
<div
|
|
style={{
|
|
width: '300vw',
|
|
height: '300vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Tooltip title="Thanks for using antd. Have a nice day!" trigger="click" defaultOpen>
|
|
<Button>Scroll The Window</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u5F53 Tooltip \u8D34\u8FB9\u65F6\uFF0C\u81EA\u52A8\u504F\u79FB\u5E76\u4E14\u8C03\u6574\u7BAD\u5934\u4F4D\u7F6E\u3002\u5F53\u8D85\u51FA\u8FC7\u591A\u65F6\uFF0C\u5219\u4E00\u540C\u6EDA\u51FA\u5C4F\u5E55\u3002</p>"}},{demo:{id:"components-tooltip-demo-auto-adjust-overflow"},previewerProps:{debug:!0,title:"\u81EA\u52A8\u8C03\u6574\u4F4D\u7F6E",filename:"components/tooltip/demo/auto-adjust-overflow.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Tooltip, Typography } from 'antd';
|
|
import React from 'react';
|
|
const Block = React.forwardRef((props, ref) => (
|
|
<div
|
|
style={{
|
|
overflow: 'auto',
|
|
position: 'relative',
|
|
padding: '24px',
|
|
border: '1px solid #e9e9e9',
|
|
}}
|
|
ref={ref}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '200%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
rowGap: 16,
|
|
}}
|
|
>
|
|
<Tooltip {...props} placement="left" title="Prompt Text">
|
|
<Button>Adjust automatically / \u81EA\u52A8\u8C03\u6574</Button>
|
|
</Tooltip>
|
|
<Tooltip {...props} placement="left" title="Prompt Text" autoAdjustOverflow={false}>
|
|
<Button>Ignore / \u4E0D\u5904\u7406</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
));
|
|
const App = () => {
|
|
const containerRef1 = React.useRef(null);
|
|
const containerRef2 = React.useRef(null);
|
|
React.useEffect(() => {
|
|
containerRef1.current.scrollLeft = containerRef1.current.clientWidth * 0.5;
|
|
containerRef2.current.scrollLeft = containerRef2.current.clientWidth * 0.5;
|
|
}, []);
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
rowGap: 16,
|
|
}}
|
|
>
|
|
<Typography.Title level={5}>With \`getPopupContainer\`</Typography.Title>
|
|
<Block ref={containerRef1} getPopupContainer={(trigger) => trigger.parentElement} />
|
|
|
|
<Typography.Title level={5}>Without \`getPopupContainer\`</Typography.Title>
|
|
<Block ref={containerRef2} />
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u6C14\u6CE1\u6846\u4E0D\u53EF\u89C1\u65F6\u81EA\u52A8\u8C03\u6574\u4F4D\u7F6E\u3002</p>"}},{demo:{id:"components-tooltip-demo-destroy-tooltip-on-hide"},previewerProps:{debug:!0,title:"\u9690\u85CF\u540E\u9500\u6BC1",filename:"components/tooltip/demo/destroy-tooltip-on-hide.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Tooltip } from 'antd';
|
|
const App = () => (
|
|
<Tooltip destroyTooltipOnHide title="prompt text">
|
|
<span>Tooltip will destroy when hidden.</span>
|
|
</Tooltip>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u901A\u8FC7 <code>destroyTooltipOnHide</code> \u63A7\u5236\u63D0\u793A\u5173\u95ED\u65F6\u662F\u5426\u9500\u6BC1 dom \u8282\u70B9\u3002</p>"}},{demo:{id:"components-tooltip-demo-colorful"},previewerProps:{title:"\u591A\u5F69\u6587\u5B57\u63D0\u793A",filename:"components/tooltip/demo/colorful.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Divider, Space, Tooltip } from 'antd';
|
|
import React from 'react';
|
|
const colors = [
|
|
'pink',
|
|
'red',
|
|
'yellow',
|
|
'orange',
|
|
'cyan',
|
|
'green',
|
|
'blue',
|
|
'purple',
|
|
'geekblue',
|
|
'magenta',
|
|
'volcano',
|
|
'gold',
|
|
'lime',
|
|
];
|
|
const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
|
|
const App = () => (
|
|
<>
|
|
<Divider orientation="left">Presets</Divider>
|
|
<Space wrap>
|
|
{colors.map((color) => (
|
|
<Tooltip title="prompt text" color={color} key={color}>
|
|
<Button>{color}</Button>
|
|
</Tooltip>
|
|
))}
|
|
</Space>
|
|
<Divider orientation="left">Custom</Divider>
|
|
<Space wrap>
|
|
{customColors.map((color) => (
|
|
<Tooltip title="prompt text" color={color} key={color}>
|
|
<Button>{color}</Button>
|
|
</Tooltip>
|
|
))}
|
|
</Space>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u6211\u4EEC\u6DFB\u52A0\u4E86\u591A\u79CD\u9884\u8BBE\u8272\u5F69\u7684\u6587\u5B57\u63D0\u793A\u6837\u5F0F\uFF0C\u7528\u4F5C\u4E0D\u540C\u573A\u666F\u4F7F\u7528\u3002</p>"}},{demo:{id:"components-tooltip-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/tooltip/demo/render-panel.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Tooltip } from 'antd';
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;
|
|
const App = () => (
|
|
<>
|
|
<InternalTooltip title="Hello, Pink Pure Panel!" color="pink" />
|
|
<InternalTooltip title="Hello, Customize Color Pure Panel!" color="#f50" />
|
|
<InternalTooltip
|
|
title="Hello, Pure Panel!"
|
|
placement="bottomLeft"
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u8C03\u8BD5\u7528\u7EC4\u4EF6\uFF0C\u8BF7\u52FF\u76F4\u63A5\u4F7F\u7528\u3002</p>"}},{demo:{id:"components-tooltip-demo-debug"},previewerProps:{debug:!0,title:"Debug",filename:"components/tooltip/demo/debug.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Tooltip } from 'antd';
|
|
import React from 'react';
|
|
const App = () => (
|
|
<Tooltip
|
|
open
|
|
title="Thanks for using antd. Have a nice day!"
|
|
arrow={{
|
|
pointAtCenter: true,
|
|
}}
|
|
placement="topLeft"
|
|
>
|
|
<Button>Point at center</Button>
|
|
</Tooltip>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Debug \u7528\u4F8B\u3002</p>"}}]}),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h2",{id:"api"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"API"),(0,t.tZ)(l.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[7].value),(0,t.tZ)("th",null,e[8].value),(0,t.tZ)("th",null,e[9].value),(0,t.tZ)("th",null,e[10].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[11].value),(0,t.tZ)("td",null,e[12].value),(0,t.tZ)("td",null,e[13].value),(0,t.tZ)("td",null,e[14].value)))),(0,t.tZ)("h3",{id:"\u5171\u540C\u7684-api"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u5171\u540C\u7684-api",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u5171\u540C\u7684 API"),(0,t.tZ)("p",null,e[15].value),(0,t.tZ)(l.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[16].value),(0,t.tZ)("th",null,e[17].value),(0,t.tZ)("th",null,e[18].value),(0,t.tZ)("th",null,e[19].value),(0,t.tZ)("th",null,e[20].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[21].value),(0,t.tZ)("td",null,e[22].value,(0,t.tZ)(o.Z,{href:"https://github.com/react-component/tooltip",sourceType:"a"},e[23].value)),(0,t.tZ)("td",null,e[24].value),(0,t.tZ)("td",null,e[25].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[26].value),(0,t.tZ)("td",null,e[27].value),(0,t.tZ)("td",null,e[28].value),(0,t.tZ)("td",null,e[29].value),(0,t.tZ)("td",null,e[30].value)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[31].value),(0,t.tZ)("td",null,e[32].value),(0,t.tZ)("td",null,e[33].value),(0,t.tZ)("td",null,e[34].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[35].value),(0,t.tZ)("td",null,e[36].value),(0,t.tZ)("td",null,e[37].value),(0,t.tZ)("td",null,e[38].value),(0,t.tZ)("td",null,e[39].value)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[40].value),(0,t.tZ)("td",null,e[41].value),(0,t.tZ)("td",null,e[42].value),(0,t.tZ)("td",null,e[43].value),(0,t.tZ)("td",null,e[44].value)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[45].value),(0,t.tZ)("td",null,e[46].value),(0,t.tZ)("td",null,e[47].value),(0,t.tZ)("td",null,e[48].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[49].value),(0,t.tZ)("td",null,e[50].value),(0,t.tZ)("td",null,e[51].value),(0,t.tZ)("td",null,e[52].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[53].value),(0,t.tZ)("td",null,e[54].value),(0,t.tZ)("td",null,e[55].value),(0,t.tZ)("td",null,e[56].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[57].value),(0,t.tZ)("td",null,e[58].value),(0,t.tZ)("td",null,e[59].value),(0,t.tZ)("td",null,e[60].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[61].value),(0,t.tZ)("td",null,e[62].value),(0,t.tZ)("td",null,e[63].value),(0,t.tZ)("td",null,e[64].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[65].value),(0,t.tZ)("td",null,e[66].value),(0,t.tZ)("td",null,e[67].value),(0,t.tZ)("td",null,e[68].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[69].value),(0,t.tZ)("td",null,e[70].value),(0,t.tZ)("td",null,e[71].value),(0,t.tZ)("td",null,e[72].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[73].value),(0,t.tZ)("td",null,e[74].value,(0,t.tZ)("code",null,e[75].value),e[76].value,(0,t.tZ)("code",null,e[77].value),e[78].value,(0,t.tZ)("code",null,e[79].value),e[80].value,(0,t.tZ)("code",null,e[81].value),e[82].value,(0,t.tZ)("code",null,e[83].value),e[84].value,(0,t.tZ)("code",null,e[85].value),e[86].value,(0,t.tZ)("code",null,e[87].value),e[88].value,(0,t.tZ)("code",null,e[89].value),e[90].value,(0,t.tZ)("code",null,e[91].value),e[92].value,(0,t.tZ)("code",null,e[93].value),e[94].value,(0,t.tZ)("code",null,e[95].value),e[96].value,(0,t.tZ)("code",null,e[97].value)),(0,t.tZ)("td",null,e[98].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[99].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[100].value),(0,t.tZ)("td",null,e[101].value,(0,t.tZ)("code",null,e[102].value),e[103].value,(0,t.tZ)("code",null,e[104].value),e[105].value,(0,t.tZ)("code",null,e[106].value),e[107].value,(0,t.tZ)("code",null,e[108].value),e[109].value),(0,t.tZ)("td",null,e[110].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[111].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[112].value),(0,t.tZ)("td",null,e[113].value,(0,t.tZ)("code",null,e[114].value),e[115].value,(0,t.tZ)(o.Z,{to:"/docs/react/faq#%E5%BC%B9%E5%B1%82%E7%B1%BB%E7%BB%84%E4%BB%B6%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%BB%9F%E4%B8%80%E8%87%B3-open-%E5%B1%9E%E6%80%A7",sourceType:"Link"},e[116].value),e[117].value),(0,t.tZ)("td",null,e[118].value),(0,t.tZ)("td",null,e[119].value),(0,t.tZ)("td",null,e[120].value)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[121].value),(0,t.tZ)("td",null,e[122].value,(0,t.tZ)("code",null,e[123].value)),(0,t.tZ)("td",null,e[124].value),(0,t.tZ)("td",null,e[125].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[126].value),(0,t.tZ)("td",null,e[127].value),(0,t.tZ)("td",null,e[128].value),(0,t.tZ)("td",null,e[129].value),(0,t.tZ)("td",null,e[130].value)))),(0,t.tZ)("h2",{id:"design-token"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,t.tZ)(c.Z,{component:"Tooltip"}),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h2",{id:"\u6CE8\u610F"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u6CE8\u610F",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u6CE8\u610F"),(0,t.tZ)("p",null,e[131].value,(0,t.tZ)("code",null,e[132].value),e[133].value,(0,t.tZ)("code",null,e[134].value),e[135].value,(0,t.tZ)("code",null,e[136].value),e[137].value,(0,t.tZ)("code",null,e[138].value),e[139].value,(0,t.tZ)("code",null,e[140].value),e[141].value))))}r.default=d}}]);
|
|
|