{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/tooltip","result":{"data":{"current":{"frontmatter":{"title":"Tooltip 工具提示","order":84,"brief":"工具提示用于对一个元素进行标识或者附上少量辅助信息，最典型的场景是向用户解释图标的含义、展示被截断的文本、显示图片的描述等。","icon":"doc-tooltip"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#注意事项","title":"注意事项"},{"url":"#位置","title":"位置"},{"url":"#指向元素中心","title":"指向元素中心"},{"url":"#触发时机","title":"触发时机"},{"url":"#覆盖特定样式","title":"覆盖特定样式"},{"url":"#渲染至指定-dom","title":"渲染至指定 DOM"},{"url":"#搭配-popover-或-popconfirm-使用","title":"搭配 Popover 或 Popconfirm 使用"},{"url":"#仅当内容宽度超出时展示-tooltip","title":"仅当内容宽度超出时展示 Tooltip"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ"},{"url":"#相关物料","title":"相关物料"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 84,\n  \"category\": \"展示类\",\n  \"title\": \"Tooltip 工具提示\",\n  \"icon\": \"doc-tooltip\",\n  \"width\": \"65%\",\n  \"brief\": \"工具提示用于对一个元素进行标识或者附上少量辅助信息，最典型的场景是向用户解释图标的含义、展示被截断的文本、显示图片的描述等。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar ApiType = makeShortcode(\"ApiType\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Tooltip } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6CE8\\u610F\\u4E8B\\u9879\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Tooltip \\u9700\\u8981\\u5C06 DOM \\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5E94\\u7528\\u5230 children \\u4E2D\\uFF0C\\u5982\\u679C\\u5B50\\u5143\\u7D20\\u662F\\u81EA\\u5B9A\\u4E49\\u7684\\u7EC4\\u4EF6\\uFF0C\\u4F60\\u9700\\u8981\\u786E\\u4FDD\\u5B83\\u80FD\\u5C06\\u5C5E\\u6027\\u4F20\\u9012\\u81F3\\u5E95\\u5C42\\u7684 DOM \\u5143\\u7D20\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u540C\\u65F6\\u4E3A\\u4E86\\u8BA1\\u7B97\\u5F39\\u51FA\\u5C42\\u7684\\u5B9A\\u4F4D\\uFF0C\\u9700\\u8981\\u83B7\\u53D6\\u5230 children \\u7684\\u771F\\u5B9E DOM \\u5143\\u7D20\\uFF0C\\u56E0\\u6B64 Tooltip \\u652F\\u6301\\u5982\\u4E0B\\u7C7B\\u578B\\u7684 children\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4F7F\\u7528 forwardRef \\u5305\\u88F9\\u540E\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5C06 props \\u4E0E ref \\u900F\\u4F20\\u5230 children \\u5185\\u771F\\u5B9E\\u7684 DOM \\u8282\\u70B9\\u4E0A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u771F\\u5B9E DOM \\u8282\\u70B9, \\u5982 span\\uFF0Cdiv\\uFF0Cp...\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Class Component\\uFF0C\\u4E0D\\u5F3A\\u5236\\u7ED1\\u5B9Aref\\uFF0C\\u4F46\\u9700\\u8981\\u786E\\u4FDD props \\u53EF\\u88AB\\u900F\\u4F20\\u81F3\\u771F\\u5B9E\\u7684 DOM \\u8282\\u70B9\\u4E0A (\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6CE8\"), \": \\u6B64\\u6761\\u89C4\\u5219\\u4EC5\\u5728 React \\u7248\\u672C\\u4F4E\\u4E8E v19 \\u65F6\\u4F7F\\u7528 @douyinfe/semi-ui \\u53EF\\u884C\\uFF0C \\u5728 React v19 \\u7248\\u672C\\u4F7F\\u7528 @douyinfe/semi-ui-19 \\u4E0D\\u53EF\\u884C\\uFF0C\\u8BE6\\u60C5\\u89C1 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/start/react19#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9\"\n  }, \"React v19 \\u9002\\u914D\\u6CE8\\u610F\\u4E8B\\u9879\"), \")\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { forwardRef } from 'react';\\nimport { Tooltip, Space } from '@douyinfe/semi-ui';\\n\\nconst style={ border: '2px solid var(--semi-color-border)', paddingLeft: 4, paddingRight: 4, borderRadius: 4 };\\n\\n// \\u5C06props\\u5C5E\\u6027\\u4F20\\u9012\\uFF0C\\u7ED1\\u5B9Aref\\nconst FCChildren = forwardRef((props, ref) => {\\n    return (<span {...props} ref={ref} style={style}>Functional Component</span>);\\n});\\n\\n// \\u5C06props\\u5C5E\\u6027\\u4F20\\u9012\\nclass MyComponent extends React.Component {\\n    render() {\\n        return (<span {...this.props} style={style}>ClassComponent</span>);\\n    }\\n};\\n\\nfunction Demo() {\\n    return (\\n        <Space>\\n            <Tooltip content={'semi design'}>\\n                <FCChildren />\\n            </Tooltip>\\n            <Tooltip content={'semi design'}>\\n                <MyComponent />\\n            </Tooltip>\\n            <Tooltip content={'semi design'}>\\n                <span style={style}>DOM</span>\\n            </Tooltip>\\n        </Space>\\n    );\\n}\\nrender(Demo);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 position \\u914D\\u7F6E\\u5F39\\u51FA\\u5C42\\u65B9\\u5411\\u4EE5\\u53CA\\u5BF9\\u9F50\\u4F4D\\u7F6E\\uFF0Cposition \\u8BE6\\u7EC6\\u53EF\\u9009\\u503C\\u8BF7\\u53C2\\u8003\\u4E0B\\u65B9 API \\u6587\\u6863\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u914D\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top\"), \" \\u65F6 \\u5411\\u4E0A\\u5F39\\u51FA\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u914D\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topLeft\"), \" \\u65F6\\uFF0C\\u5411\\u4E0A\\u5F39\\u51FA\\uFF0C\\u4E14\\u5F39\\u51FA\\u5C42\\u4E0E children \\u5DE6\\u5BF9\\u9F50\\uFF08\\u5F53arrowPointAtCenter=false\\u65F6\\uFF09\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u914D\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topRight\"), \" \\u65F6\\uFF0C\\u5411\\u4E0A\\u5F39\\u51FA\\uFF0C\\u4E14\\u5F39\\u51FA\\u5C42\\u4E0E children \\u53F3\\u5BF9\\u9F50\\uFF08\\u5F53arrowPointAtCenter=false\\u65F6\\uFF09\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5176\\u4ED6\\u65B9\\u5411\\u540C\\u7406  \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Tooltip, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const tops = [\\n        ['topLeft', 'TL'],\\n        ['top', 'Top'],\\n        ['topRight', 'TR'],\\n    ];\\n    const lefts = [\\n        ['leftTop', 'LT'],\\n        ['left', 'Left'],\\n        ['leftBottom', 'LB'],\\n    ];\\n    const rights = [\\n        ['rightTop', 'RT'],\\n        ['right', 'Right'],\\n        ['rightBottom', 'RB'],\\n    ];\\n    const bottoms = [\\n        ['bottomLeft', 'BL'],\\n        ['bottom', 'Bottom'],\\n        ['bottomRight', 'BR'],\\n    ];\\n\\n    return (\\n        <div>\\n            <div style={{ marginLeft: 80, whiteSpace: 'nowrap' }}>\\n                {tops.map((pos, index) => (\\n                    <Tooltip\\n                        content={\\n                            <article>\\n                                <p>hi bytedance</p>\\n                                <p>hi bytedance</p>\\n                            </article>\\n                        }\\n                        arrowPointAtCenter={false}\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag style={{ margin: 8, padding: 20 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Tooltip>\\n                ))}\\n            </div>\\n            <div style={{ width: 80, float: 'left' }}>\\n                {lefts.map((pos, index) => (\\n                    <Tooltip\\n                        content={\\n                            <article>\\n                                <p>hi bytedance</p>\\n                                <p>hi bytedance</p>\\n                            </article>\\n                        }\\n                        arrowPointAtCenter={false}\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Tooltip>\\n                ))}\\n            </div>\\n            <div style={{ width: 40, marginLeft: 300 }}>\\n                {rights.map((pos, index) => (\\n                    <Tooltip\\n                        content={\\n                            <article>\\n                                <p>hi bytedance</p>\\n                                <p>hi bytedance</p>\\n                            </article>\\n                        }\\n                        arrowPointAtCenter={false}\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Tooltip>\\n                ))}\\n            </div>\\n            <div style={{ marginLeft: 80, clear: 'both', whiteSpace: 'nowrap' }}>\\n                {bottoms.map((pos, index) => (\\n                    <Tooltip\\n                        content={\\n                            <article>\\n                                <p>hi bytedance</p>\\n                                <p>hi bytedance</p>\\n                            </article>\\n                        }\\n                        arrowPointAtCenter={false}\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Tooltip>\\n                ))}\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6307\\u5411\\u5143\\u7D20\\u4E2D\\u5FC3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"arrowPointAtCenter=true\"), \"\\uFF0C\\u5C0F\\u4E09\\u89D2\\u59CB\\u7EC8\\u6307\\u5411 children \\u5143\\u7D20\\u4E2D\\u5FC3\\u4F4D\\u7F6E\\u3002\\n\\u4F60\\u53EF\\u4EE5\\u5C06\\u5176\\u8BBE\\u7F6E\\u4E3A false\\uFF0C\\u6B64\\u65F6\\u5C0F\\u4E09\\u89D2\\u5C06\\u4E0D\\u518D\\u4FDD\\u6301\\u6307\\u5411\\u5143\\u7D20\\u4E2D\\u5FC3\\u3002\\u5F39\\u51FA\\u5C42\\u4E0E children \\u8FB9\\u7F18\\u5BF9\\u9F50\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Tooltip, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <>\\n            <div>\\n                <Tooltip\\n                    position='topLeft'\\n                    content='semi design tooltip'>\\n                    <Button type='secondary' style={{ marginRight: 8 }}>\\u6307\\u5411\\u5143\\u7D20\\u4E2D\\u5FC3</Button>\\n                </Tooltip>\\n            </div>\\n\\n            <div style={{ marginTop: 20 }}>\\n                <Tooltip\\n                    content='semi design tooltip'\\n                    arrowPointAtCenter={false}\\n                    position='topLeft'\\n                >\\n                    <Button type='secondary' style={{ marginRight: 8, width: 120 }}>\\u8FB9\\u7F18\\u5BF9\\u9F50</Button>\\n                </Tooltip>\\n            </div>\\n        </>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u89E6\\u53D1\\u65F6\\u673A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u914D\\u7F6E\\u89E6\\u53D1\\u5C55\\u793A\\u7684\\u65F6\\u673A\\uFF0C\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"hover\"), \"\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"hover\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"focus\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"click\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"custom\"), \"/ 'contextMenu' \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8BBE\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"custom\"), \" \\u65F6\\uFF0C\\u9700\\u8981\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"visible\"), \" \\u5C5E\\u6027\\u4F7F\\u7528\\uFF0C\\u6B64\\u65F6\\u663E\\u793A\\u4E0E\\u5426\\u5B8C\\u5168\\u53D7\\u63A7\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"contextMenu \\u53F3\\u952E\\u89E6\\u53D1\\u5728 v 2.42.0 \\u540E\\u5F00\\u59CB\\u63D0\\u4F9B\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { Tooltip, Button, Input, RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [visible, setVisible] = useState(false);\\n    // container \\u9700\\u8981\\u8BBE\\u7F6E position: relative\\n    const getPopupContainer = () => document.querySelector('#tooltip-container');\\n\\n    return (\\n        <div style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative' }} id=\\\"tooltip-container\\\">\\n            <div style={{ width: '150%', height: '150%', paddingLeft: 50, paddingTop: 50 }}>\\n                <Tooltip content={'hi bytedance'} getPopupContainer={getPopupContainer}>\\n                    <Button theme='solid' type='tertiary' style={{ marginBottom: 20 }}>\\u60AC\\u505C\\u663E\\u793A</Button>\\n                </Tooltip>\\n                <br />\\n                <Tooltip content={'hi bytedance'} trigger=\\\"click\\\" getPopupContainer={getPopupContainer}>\\n                    <Button style={{ marginBottom: 20 }}>\\u70B9\\u51FB\\u663E\\u793A</Button>\\n                </Tooltip>\\n                <br />\\n                <Tooltip content={'hi bytedance'} trigger=\\\"focus\\\" getPopupContainer={getPopupContainer}>\\n                    <Input style={{ width: 100, marginBottom: 20 }} placeholder=\\\"\\u805A\\u7126\\u663E\\u793A\\\" />\\n                </Tooltip>\\n                <br />\\n                <Tooltip content={'hi bytedance'} trigger=\\\"contextMenu\\\" getPopupContainer={getPopupContainer}>\\n                    <Button theme='solid' type='secondary' style={{ marginBottom: 20 }}>\\u53F3\\u952E\\u70B9\\u51FB\\u5C55\\u793A</Button>\\n                </Tooltip>\\n                <br />\\n                <Tooltip\\n                    content={'hi bytedance'}\\n                    trigger=\\\"custom\\\"\\n                    visible={visible}\\n                    getPopupContainer={getPopupContainer}\\n                >\\n                    <span style={{ display: 'inline-block' }}>\\n                        <RadioGroup type='button' onChange={(e) => setVisible(e.target.value)} value={visible}>\\n                            <Radio value={true}>\\u53D7\\u63A7\\u663E\\u793A</Radio>\\n                            <Radio value={false}>\\u53D7\\u63A7\\u9690\\u85CF</Radio>\\n                        </RadioGroup>\\n                    </span>\\n                </Tooltip>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8986\\u76D6\\u7279\\u5B9A\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 className\\u3001style \\u4E3A\\u5F39\\u51FA\\u5C42\\u914D\\u7F6E\\u7279\\u5B9A\\u6837\\u5F0F\\uFF0C\\u4F8B\\u5982\\u8986\\u76D6\\u9ED8\\u8BA4\\u7684 maxWidth \\uFF08240px\\uFF09\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Tooltip, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <div>\\n            <Tooltip\\n                style={{\\n                    maxWidth: 320\\n                }}\\n                className='another-classname'\\n                content={'hi semi semi semi semi semi semi semi'}\\n            >\\n                <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>\\n            </Tooltip>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6E32\\u67D3\\u81F3\\u6307\\u5B9A DOM\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getPopupContainer\"), \"\\uFF0C\\u5F39\\u5C42\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5\\u51FD\\u6570\\u8FD4\\u56DE\\u7684 DOM \\u4E2D\\u3002 \\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF1A\"), \" \\u8FD4\\u56DE\\u7684\\u5BB9\\u5668\\u5982\\u679C\\u4E0D\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"document.body\"), \"\\uFF0C\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"position\"), \" \\u9700\\u8981\\u8BBE\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"\\\"relative\\\"\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Tooltip, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div id=\\\"tooltip-wrapper\\\" style={{ position: 'relative' }}>\\n            <Tooltip\\n                position=\\\"right\\\"\\n                content=\\\"\\u6D6E\\u5C42\\u88AB\\u6E32\\u67D3\\u81F3#tooltip-wrapper\\u5143\\u7D20\\u4E2D\\\"\\n                trigger=\\\"click\\\"\\n                getPopupContainer={() => document.querySelector('#tooltip-wrapper')}\\n            >\\n                <Tag>\\u70B9\\u51FB\\u6B64\\u5904</Tag>\\n            </Tooltip>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u642D\\u914D Popover \\u6216 Popconfirm \\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Tooltip\\u3001Popconfirm\\u3001Popover \\u90FD\\u9700\\u8981\\u52AB\\u6301 children \\u7684\\u76F8\\u5173\\u4E8B\\u4EF6\\uFF08onMouseEnter/onMouseLeave/onClick....\\uFF09\\uFF0C\\u7528\\u4E8E\\u914D\\u7F6E trigger\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u679C\\u76F4\\u63A5\\u5D4C\\u5957\\u4F7F\\u7528\\u7684\\u8BDD\\uFF0C\\u4F1A\\u4F7F\\u5916\\u5C42 trigger \\u5931\\u6548\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u9700\\u8981\\u5728\\u4E2D\\u95F4\\u52A0\\u4E00\\u5C42\\u5143\\u7D20\\uFF08div \\u6216 span\\uFF09\\u4EE5\\u9632\\u6B62 trigger \\u7684\\u4E8B\\u4EF6\\u52AB\\u6301\\u5931\\u6548\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Tooltip, Popconfirm, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Popconfirm content=\\\"\\u662F\\u5426\\u786E\\u8BA4\\u5220\\u9664\\\" title='\\u786E\\u8BA4' style={{ width: 320 }}>\\n        <span style={{ display: 'inline-block' }}>\\n            <Tooltip content={'\\u5220\\u9664\\u8BC4\\u4EF7'}>\\n                <Button type=\\\"danger\\\">\\u5220\\u9664</Button>\\n            </Tooltip>\\n        </span>\\n    </Popconfirm>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4EC5\\u5F53\\u5185\\u5BB9\\u5BBD\\u5EA6\\u8D85\\u51FA\\u65F6\\u5C55\\u793A Tooltip\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u4E3A\\u8FD9\\u79CD\\u573A\\u666F\\u63D0\\u4F9B\\u4E86 Typography \\u7EC4\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u66F4\\u7B80\\u5355\\u5FEB\\u6377\\u5730\\u6EE1\\u8DB3\\u9700\\u6C42\\u3002\\u4E0D\\u9700\\u8981\\u81EA\\u5DF1\\u518D\\u5BF9 Tooltip \\u7684\\u51FA\\u73B0\\u505A\\u6761\\u4EF6\\u5224\\u65AD\\uFF0C\\u8BE6\\u7EC6\\u7684\\u4F7F\\u7528\\u8BF7\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/typography#%E7%9C%81%E7%95%A5%E6%96%87%E6%9C%AC\"\n  }, \"Typography \\u7EC4\\u4EF6\\u6587\\u6863\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Paragraph, Title, Text } = Typography;\\n\\n    return (\\n        <div>\\n            <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>\\n                \\u662F\\u4E00\\u4E2A\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F5\\u53F7\\u6807\\u9898\\n            </Title>\\n            <br />\\n            <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}>\\n                \\u662F\\u4E00\\u4E2A\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u7684\\u94FE\\u63A5\\n            </Text>\\n            <br />\\n            <br />\\n            <Paragraph\\n                ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }}\\n                style={{ width: 300 }}\\n            >\\n                \\u591A\\u884C\\u622A\\u65AD\\uFF0C\\u5C55\\u793A Popover\\uFF1ASemi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED\\n                \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684\\n                Web \\u5E94\\u7528\\u3002\\n            </Paragraph>\\n        </div>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"hr\", {\n    parentName: \"section\"\n  }), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoAdjustOverflow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u88AB\\u906E\\u6321\\u65F6\\u662F\\u5426\\u81EA\\u52A8\\u8C03\\u6574\\u65B9\\u5411\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"arrowPointAtCenter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u201C\\u5C0F\\u4E09\\u89D2\\u201D\\u662F\\u5426\\u6307\\u5411\\u5143\\u7D20\\u4E2D\\u5FC3\\uFF0C\\u9700\\u8981\\u540C\\u65F6\\u4F20\\u5165\\\"showArrow=true\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u7684\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clickToHide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u5F39\\u51FA\\u5C42\\u53CA\\u5185\\u90E8\\u4EFB\\u4E00\\u5143\\u7D20\\u65F6\\u662F\\u5426\\u81EA\\u52A8\\u5173\\u95ED\\u5F39\\u5C42\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disableFocusListener\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"trigger\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"hover\"), \"\\u65F6\\uFF0C\\u4E0D\\u54CD\\u5E94\\u952E\\u76D8\\u805A\\u7126\\u5F39\\u51FA\\u6D6E\\u5C42\\u4E8B\\u4EF6\\uFF0C\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/977\"\n  }, \"issue#977\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.17.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getPopupContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u7236\\u7EA7 DOM\\uFF0C\\u5F39\\u5C42\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5 DOM \\u4E2D\\uFF0C\\u81EA\\u5B9A\\u4E49\\u9700\\u8981\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"position: relative\"), \" \\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function():HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => document.body\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keepDOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5173\\u95ED\\u65F6\\u662F\\u5426\\u4FDD\\u7559\\u5185\\u90E8\\u7EC4\\u4EF6\\u4E0D\\u9500\\u6BC1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.31.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"margin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BA1\\u7B97\\u6EA2\\u51FA\\u65F6\\u7684\\u589E\\u52A0\\u7684\\u5197\\u4F59\\u503C\\uFF0C\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/549\"\n  }, \"issue#549\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \\uFF5C \", mdx(ApiType, {\n    detail: \"{ marginLeft: number; marginTop: number; marginRight: number; marginBottom: number }\",\n    mdxType: \"ApiType\"\n  }, \"MarginObject\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.23.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouseEnterDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u79FB\\u5165\\u540E\\uFF0C\\u5EF6\\u8FDF\\u663E\\u793A\\u7684\\u65F6\\u95F4\\uFF0C\\u5355\\u4F4D\\u6BEB\\u79D2\\uFF08\\u4EC5\\u5F53 trigger \\u4E3A hover/focus \\u65F6\\u751F\\u6548\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouseLeaveDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u79FB\\u51FA\\u540E\\uFF0C\\u5EF6\\u8FDF\\u6D88\\u5931\\u7684\\u65F6\\u95F4\\uFF0C\\u5355\\u4F4D\\u6BEB\\u79D2\\uFF08\\u4EC5\\u5F53 trigger \\u4E3A hove/focus \\u65F6\\u751F\\u6548\\uFF09\\uFF0C\\u4E0D\\u5C0F\\u4E8E mouseEnterDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u5F39\\u51FA\\u5C42\\u52A8\\u753B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u5C55\\u793A\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topLeft\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftTop\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftBottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"rightTop\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"rightBottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomLeft\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomRight\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'top'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prefixCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42 wrapper div \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"className\"), \" \\u524D\\u7F00\\uFF0C\\u8BBE\\u7F6E\\u8BE5\\u9879\\u65F6\\uFF0C\\u5F39\\u51FA\\u5C42\\u5C06\\u4E0D\\u518D\\u5E26 Tooltip \\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'semi-tooltip'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventScroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u5E94\\u6EDA\\u52A8\\u6587\\u6863\\u4EE5\\u663E\\u793A\\u65B0\\u805A\\u7126\\u7684\\u5143\\u7D20\\uFF0C\\u4F5C\\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u7684 focus \\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rePosKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u4EE5\\u66F4\\u65B0\\u8BE5\\u9879\\u503C\\u624B\\u52A8\\u89E6\\u53D1\\u5F39\\u51FA\\u5C42\\u7684\\u91CD\\u65B0\\u5B9A\\u4F4D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u7684\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"spacing\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"children\"), \" \\u5143\\u7D20\\u7684\\u8DDD\\u79BB\\uFF0C\\u5355\\u4F4D px\\uFF08object\\u7C7B\\u578B\\u81EA v2.45\\u540E\\u652F\\u6301\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \\uFF5C \", mdx(ApiType, {\n    detail: \"{ x: number; y: number }\",\n    mdxType: \"ApiType\"\n  }, \"SpacingObject\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showArrow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u7BAD\\u5934\\u4E09\\u89D2\\u5F62\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stopPropagation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u963B\\u6B62\\u5F39\\u5C42\\u4E0A\\u7684\\u70B9\\u51FB\\u4E8B\\u4EF6\\u5192\\u6CE1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transformFromCenter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4ECE\\u5305\\u88F9\\u7684\\u5143\\u7D20\\u6C34\\u5E73\\u6216\\u5782\\u76F4\\u4E2D\\u5FC3\\u5904\\u53D8\\u6362\\uFF0C\\u8BE5\\u53C2\\u6570\\u4EC5\\u5F71\\u54CD\\u52A8\\u6548\\u53D8\\u6362\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"transform-origin\"), \"\\uFF0C\\u4E00\\u822C\\u65E0\\u9700\\u6539\\u52A8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"trigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E6\\u53D1\\u5C55\\u793A\\u7684\\u65F6\\u673A\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"hover\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"focus\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"click\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"custom\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"contextMenu\"), \" (v2.42\\u540E\\u63D0\\u4F9B)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'hover'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"visible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u5F39\\u51FA\\u5C42, \\u9700\\u914D\\u5408 trigger='custom' \\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"wrapperClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53 children \\u4E3A disabled \\uFF0C\\u6216\\u8005 children \\u4E3A\\u591A\\u4E2A\\u5143\\u7D20\\u65F6\\uFF0C\\u5916\\u5C42\\u5C06\\u4F1A\\u5305\\u88F9\\u4E00\\u5C42 span \\u5143\\u7D20\\uFF0C\\u8BE5 api \\u7528\\u4E8E\\u8BBE\\u7F6E\\u6B64 span \\u7684\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"wrapperId\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42 wrapper \\u8282\\u70B9\\u7684 id\\uFF0Ctrigger \\u7684 aria \\u5C5E\\u6027\\u6307\\u5411\\u6B64 id\\uFF0C\\u82E5\\u4E0D\\u8BBE\\u7F6E\\u7EC4\\u4EF6\\u4F1A\\u968F\\u673A\\u751F\\u6210\\u4E00\\u4E2A id\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.11.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u5C42\\u5C42\\u7EA7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1060\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u5C55\\u793A/\\u9690\\u85CF\\u65F6\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(isVisible:boolean)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClickOutSide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u5F39\\u51FA\\u5C42\\u5904\\u4E8E\\u5C55\\u793A\\u72B6\\u6001\\uFF0C\\u70B9\\u51FB\\u975EChildren\\u3001\\u975E\\u6D6E\\u5C42\\u5185\\u90E8\\u533A\\u57DF\\u65F6\\u7684\\u56DE\\u8C03\\uFF08\\u4EC5trigger\\u4E3Acustom\\u3001click\\u65F6\\u6709\\u6548\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e:event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.1.0\")))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tooltip \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"tooltip\"), \" role\\uFF0C\\u9075\\u5FAA \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.w3.org/TR/wai-aria-practices/#tooltip\"\n  }, \"WAI-ARIA\"), \" \\u89C4\\u8303\\u4E2D\\u5BF9\\u4E8E Tooltip \\u7684\\u5B9A\\u4E49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tooltip \\u7684 content \\u4E0E children\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5173\\u4E8E content\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"content \\u7684 wrapper \\u4F1A\\u88AB\\u81EA\\u52A8\\u6DFB\\u52A0 id \\u5C5E\\u6027\\uFF0C\\u7528\\u4E8E\\u4E0E children \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" \\u5339\\u914D\\uFF0C\\u5173\\u8054 content \\u4E0E children\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5173\\u4E8E children\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tooltip \\u7684\\u5185\\u5BB9\\uFF08content\\uFF09\\u4E0E\\u5176\\u89E6\\u53D1\\u5668\\uFF08children\\uFF09\\u4E4B\\u95F4\\u5E94\\u5F53\\u5177\\u6709\\u663E\\u5F0F\\u8054\\u7CFB\\u3002Tooltip \\u4F1A\\u81EA\\u52A8\\u4E3A children \\u5143\\u7D20\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" \\u5C5E\\u6027\\uFF0C\\u503C\\u4E3A content wraper\\u7684 id\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u82E5\\u4F60 Tooltip\\u7684children \\u662FIcon\\uFF0C\\u4E0D\\u5305\\u542B\\u53EF\\u89C1\\u6587\\u672C\\uFF0C\\u6211\\u4EEC\\u63A8\\u8350\\u4F60\\u5728 children \\u4E0A\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u5C5E\\u6027\\u8FDB\\u884C\\u76F8\\u5E94\\u63CF\\u8FF0\")))))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Good practices, add aria-label to description tooltip children\\n/* eslint-disable */\\n<Tooltip content={<p id='description'>Edit your setting</p>}>\\n    <IconSetting aria-label='Settings'> \\n    </IconSetting>\\n</Tooltip>\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EA\\u5C55\\u793A\\u4FE1\\u606F\\u8BF4\\u660E\\u548C\\u5F15\\u5BFC\\uFF0C\\u4E0D\\u5C55\\u793A\\u62A5\\u9519\\u4FE1\\u606F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0D\\u5728 tooltip \\u91CC\\u53EA\\u80FD\\u662F\\u989D\\u5916\\u7684\\u94FE\\u63A5\\u548C\\u6309\\u94AE\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5C3D\\u91CF\\u7CBE\\u7B80\\u81F3\\u4E00\\u53E5\\u8BDD\\u8FDB\\u884C\\u8BF4\\u660E\\uFF0C\\u4E0D\\u5C55\\u793A\\u6807\\u70B9\\u7B26\\u53F7\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4E3A\\u4EC0\\u4E48 Tooltip content \\u914D\\u7F6E\\u5F88\\u957F\\u5F88\\u957F\\u7684\\u5185\\u5BB9\\u65F6\\uFF0C\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\u5185\\u5BB9\\u4F1A\\u8D85\\u51FA\\u663E\\u793A\\u533A\\u57DF?\"), mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u5728 v2.36.0 \\u7248\\u672C\\u4EE5\\u524D\\uFF0C\\u8003\\u8651\\u5230\\u4E0D\\u540C\\u8BED\\u8A00\\u5185\\u5BB9\\uFF08\\u7EAF\\u82F1\\u6587\\u3001\\u4E2D\\u6587\\u3001\\u4E2D\\u82F1\\u6587\\u6DF7\\u5408\\u3001\\u5176\\u4ED6\\u8BED\\u79CD\\u6DF7\\u5408\\uFF09\\u5BF9\\u6362\\u884C\\u7684\\u9700\\u6C42\\u4E0D\\u592A\\u4E00\\u81F4\\uFF0C\\u6240\\u4EE5\\u7EC4\\u4EF6\\u5C42\\u6CA1\\u6709\\u505A\\u8FD9\\u4E2A\\u9884\\u8BBE\\u3002\\u5728\\u63A5\\u6536\\u5230\\u8F83\\u591A\\u4F7F\\u7528\\u53CD\\u9988\\u540E\\uFF0C\\u81EA v2.36.0 \\u7248\\u672C\\uFF0CTooltip \\u5185\\u90E8\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, \"word-wrap\"), \" \\u4E3A break-word \\u5904\\u7406\\u6587\\u672C\\u6362\\u884C\\u3002\\u5BF9\\u4E8E\\u4EFB\\u610F\\u7248\\u672C\\uFF0C\\u5982\\u679C\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\u4E0D\\u7B26\\u5408\\u9884\\u671F\\uFF0C\\u4F7F\\u7528\\u65B9\\u90FD\\u53EF\\u4EE5\\u901A\\u8FC7 style/className API \\u8BBE\\u7F6E\\u6362\\u884C\\u76F8\\u5173 CSS \\u5C5E\\u6027\\u8FDB\\u884C\\u8C03\\u6574\\u3002\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u5173\\u7269\\u6599\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"41\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/tooltip","next":{"fields":{"slug":"en-US/show/userGuide"},"id":"fcfbd10c-293f-5246-964e-0d9a14369366","frontmatter":{"title":"UserGuide","localeCode":"en-US","icon":"doc-userGuide","showNew":null}},"previous":{"fields":{"slug":"en-US/show/tooltip"},"id":"a84b72f4-63a1-5094-a49e-683cddf01ddf","frontmatter":{"title":"Tooltip","localeCode":"en-US","icon":"doc-tooltip","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}