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
29 KiB
366 lines
29 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[7738],{388495:function(p,r,n){n.r(r);var m=n(502143),_=n(968521),v=n(720719),g=n(28840),h=n(759907),l=n(828089),Z=n(825673),f=n(902068),T=n(574399),b=n(863942),x=n(316073),w=n(24628),B=n(719260),P=n(956140),c=n(127179),a=n(905388),y=n(40428),E=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),d=n(667294),t=n(370917);function u(){var s=(0,i.eL)(),e=s.texts;return(0,t.tZ)(i.dY,null,(0,t.tZ)(d.Fragment,null,(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,e[0].value),(0,t.tZ)("h2",{id:"when-to-use"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,e[1].value),(0,t.tZ)("li",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:"examples"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,t.tZ)(a.Z,{items:[{demo:{id:"components-tooltip-demo-basic"},previewerProps:{title:"Basic",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>The simplest usage.</p>"}},{demo:{id:"components-tooltip-demo-placement"},previewerProps:{title:"Placement",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>There are 12 placement options available.</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:"Arrow",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>Support show, hide or keep arrow in the center.</p>"}},{demo:{id:"components-tooltip-demo-shift"},previewerProps:{iframe:"200",title:"Auto Shift",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>Auto adjust Popup and arrow position when Tooltip is close to the edge of the screen. Will be out of screen when exceed limitation.</p>"}},{demo:{id:"components-tooltip-demo-auto-adjust-overflow"},previewerProps:{debug:!0,title:"Adjust placement automatically",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>Adjust placement automatically when tooltip is invisible.</p>"}},{demo:{id:"components-tooltip-demo-destroy-tooltip-on-hide"},previewerProps:{debug:!0,title:"Destroy tooltip when hidden",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>Setting <code>destroyTooltipOnHide</code> to control whether destroy dom node of tooltip when hidden.</p>"}},{demo:{id:"components-tooltip-demo-colorful"},previewerProps:{title:"Colorful Tooltip",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>We preset a series of colorful Tooltip styles for use in different situations.</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>Debug usage. Do not use in your production.</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 use.</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:"common-api"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#common-api",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Common 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)("code",null,e[51].value),e[52].value,(0,t.tZ)("code",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)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[56].value),(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)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[60].value),(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)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[64].value),(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)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[68].value),(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)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[72].value),(0,t.tZ)("td",null,e[73].value),(0,t.tZ)("td",null,e[74].value),(0,t.tZ)("td",null,e[75].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[76].value),(0,t.tZ)("td",null,e[77].value,(0,t.tZ)("code",null,e[78].value),e[79].value,(0,t.tZ)("code",null,e[80].value),e[81].value,(0,t.tZ)("code",null,e[82].value),e[83].value,(0,t.tZ)("code",null,e[84].value),e[85].value,(0,t.tZ)("code",null,e[86].value),e[87].value,(0,t.tZ)("code",null,e[88].value),e[89].value,(0,t.tZ)("code",null,e[90].value),e[91].value,(0,t.tZ)("code",null,e[92].value),e[93].value,(0,t.tZ)("code",null,e[94].value),e[95].value,(0,t.tZ)("code",null,e[96].value),e[97].value,(0,t.tZ)("code",null,e[98].value),e[99].value,(0,t.tZ)("code",null,e[100].value)),(0,t.tZ)("td",null,e[101].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[102].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[103].value),(0,t.tZ)("td",null,e[104].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[105].value),e[106].value,(0,t.tZ)("code",null,e[107].value),e[108].value,(0,t.tZ)("code",null,e[109].value),e[110].value,(0,t.tZ)("code",null,e[111].value),e[112].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[113].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[114].value),(0,t.tZ)("td",null,e[115].value,(0,t.tZ)("code",null,e[116].value),e[117].value,(0,t.tZ)(o.Z,{to:"/docs/react/faq#why-open",sourceType:"Link"},e[118].value),e[119].value),(0,t.tZ)("td",null,e[120].value),(0,t.tZ)("td",null,e[121].value),(0,t.tZ)("td",null,e[122].value)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[123].value),(0,t.tZ)("td",null,e[124].value,(0,t.tZ)("code",null,e[125].value),e[126].value),(0,t.tZ)("td",null,e[127].value),(0,t.tZ)("td",null,e[128].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[129].value),(0,t.tZ)("td",null,e[130].value),(0,t.tZ)("td",null,e[131].value),(0,t.tZ)("td",null,e[132].value),(0,t.tZ)("td",null,e[133].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:"note"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#note",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Note"),(0,t.tZ)("p",null,e[134].value,(0,t.tZ)("code",null,e[135].value),e[136].value,(0,t.tZ)("code",null,e[137].value),e[138].value,(0,t.tZ)("code",null,e[139].value),e[140].value,(0,t.tZ)("code",null,e[141].value),e[142].value,(0,t.tZ)("code",null,e[143].value),e[144].value))))}r.default=u}}]);
|
|
|