{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/popover","result":{"data":{"current":{"frontmatter":{"title":"Popover 气泡卡片","order":78,"brief":"点击/鼠标移入元素，弹出气泡式的卡片浮层。","icon":"doc-popover"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#注意事项","title":"注意事项"},{"url":"#基本使用","title":"基本使用"},{"url":"#弹出位置","title":"弹出位置"},{"url":"#受控显示","title":"受控显示"},{"url":"#显示小三角","title":"显示小三角"},{"url":"#指向元素中心","title":"指向元素中心"},{"url":"#设置浮层背景色","title":"设置浮层背景色"},{"url":"#初始化弹出层焦点位置","title":"初始化弹出层焦点位置"},{"url":"#搭配-tooltip-或-popconfirm-使用","title":"搭配 Tooltip 或 Popconfirm 使用"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#键盘和焦点","title":"键盘和焦点"}]},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ"}]},"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\": 78,\n  \"category\": \"展示类\",\n  \"title\": \"Popover 气泡卡片\",\n  \"icon\": \"doc-popover\",\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  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Popover \\u6C14\\u6CE1\\u5361\\u7247\\u662F\\u7531\\u7528\\u6237\\u81EA\\u4E3B\\u6253\\u5F00\\u7684\\u4E34\\u65F6\\u6027\\u6D6E\\u5C42\\u5361\\u7247\\uFF0C\\u80FD\\u591F\\u627F\\u8F7D\\u4E00\\u4E9B\\u989D\\u5916\\u5185\\u5BB9\\u548C\\u4EA4\\u4E92\\u884C\\u4E3A\\u800C\\u4E0D\\u5F71\\u54CD\\u539F\\u9875\\u9762\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u548C Tooltip \\u7684\\u533A\\u522B\\u662F\\uFF0C\\u5B83\\u53EF\\u4EE5\\u627F\\u8F7D\\u66F4\\u590D\\u6742\\u7684\\u5185\\u5BB9\\uFF0C\\u800C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u63D0\\u793A\\u6587\\u672C\\u3002\")), 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 { Popover } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6CE8\\u610F\\u4E8B\\u9879\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Popover \\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 Popover \\u652F\\u6301\\u5982\\u4E0B\\u7C7B\\u578B\\u7684 children\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, 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(\"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(\"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 { Popover, Space, Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations';\\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\\nconst content = (\\n    <Empty\\n        title={'\\u5148\\u8FDB\\u7684\\u8BBE\\u8BA1 / \\u7814\\u53D1\\u534F\\u4F5C\\u65B9\\u5F0F'}\\n        image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}\\n        darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}\\n        description=\\\"\\u4F7F\\u7528 Semi D2C \\u5FEB\\u901F\\u8FD8\\u539F Figma \\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u4E00\\u952E\\u8F6C\\u4EE3\\u7801\\\"\\n        style={{ width: 400, margin: '0 auto', display: 'flex', padding: 20 }}\\n    />\\n);\\n\\nfunction Demo() {\\n    return (\\n        <Space>\\n            <Popover content={content}>\\n                <FCChildren />\\n            </Popover>\\n            <Popover content={content}>\\n                <MyComponent />\\n            </Popover>\\n            <Popover content={content}>\\n                <span style={style}>DOM</span>\\n            </Popover>\\n        </Space>\\n    );\\n}\\nrender(Demo);\\n\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06\\u6D6E\\u5C42\\u7684\\u89E6\\u53D1\\u5668 Trigger \\u4F5C\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \"\\uFF0C\\u4F7F\\u7528 Popover \\u5305\\u88F9\\uFF08\\u5982\\u4E0B\\u7684\\u4F8B\\u5B50\\u4E2D\\u89E6\\u53D1\\u5668\\u4E3A Tag \\u5143\\u7D20\\uFF09\\u3002\\u6D6E\\u5C42\\u5185\\u5BB9\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"content\"), \"\\u4F20\\u5165\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6CE8\\u610F\\u4E8B\\u9879\\u540C \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/tooltip#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9\"\n  }, \"Tooltip\"), \" \"), 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 { Popover, Tag, Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations';\\n\\nfunction Demo() {\\n    return (\\n        <Popover\\n            content={\\n                <Empty\\n                    title={'\\u5148\\u8FDB\\u7684\\u8BBE\\u8BA1 / \\u7814\\u53D1\\u534F\\u4F5C\\u65B9\\u5F0F'}\\n                    image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}\\n                    darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}\\n                    description=\\\"\\u4F7F\\u7528 Semi D2C \\u5FEB\\u901F\\u8FD8\\u539F Figma \\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u4E00\\u952E\\u8F6C\\u4EE3\\u7801\\\"\\n                    style={{ width: 400, margin: '0 auto', display: 'flex', padding: 20 }}\\n                />\\n            }\\n        >\\n            <Tag>\\u60AC\\u505C\\u6B64\\u5904</Tag>\\n        </Popover>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5F39\\u51FA\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \"\\u8BBE\\u7F6E\\u6D6E\\u5C42\\u5F39\\u51FA\\u65B9\\u5411\\uFF0C\\u5171\\u652F\\u6301\\u5341\\u4E8C\\u4E2A\\u65B9\\u5411\\u3002\"), 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 { Popover, Tag, Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations';\\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    const article = (\\n        <Empty\\n            title={'\\u5148\\u8FDB\\u7684\\u8BBE\\u8BA1 / \\u7814\\u53D1\\u534F\\u4F5C\\u65B9\\u5F0F'}\\n            image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}\\n            darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}\\n            description=\\\"\\u4F7F\\u7528 Semi D2C \\u5FEB\\u901F\\u8FD8\\u539F Figma \\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u4E00\\u952E\\u8F6C\\u4EE3\\u7801\\\"\\n            style={{ width: 400, margin: '0 auto', display: 'flex', padding: 20 }}\\n        />\\n    );\\n\\n    return (\\n        <div>\\n            <div style={{ marginLeft: 80, whiteSpace: 'nowrap' }}>\\n                {tops.map((pos, index) => (\\n                    <Popover\\n                        content={article}\\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                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ width: 80, float: 'left' }}>\\n                {lefts.map((pos, index) => (\\n                    <Popover\\n                        content={article}\\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                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ width: 40, marginLeft: 300 }}>\\n                {rights.map((pos, index) => (\\n                    <Popover\\n                        content={article}\\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                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ marginLeft: 80, clear: 'both', whiteSpace: 'nowrap' }}>\\n                {bottoms.map((pos, index) => (\\n                    <Popover\\n                        content={article}\\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                    </Popover>\\n                ))}\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\\u663E\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"trigger='custom'\"), \"\\uFF0C\\u6B64\\u573A\\u666F\\u4E0B\\uFF0CPopover \\u7684\\u663E\\u793A\\u4E0E\\u5426\\u5B8C\\u5168\\u53D7\\u5230\\u53C2\\u6570 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"visible\"), \" \\u7684\\u63A7\\u5236\\u3002\"), 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, { useState } from 'react';\\nimport { Popover, Button, RadioGroup, Radio, Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations';\\n\\n() => {\\n    const content = (\\n        <Empty\\n            title={'\\u5148\\u8FDB\\u7684\\u8BBE\\u8BA1 / \\u7814\\u53D1\\u534F\\u4F5C\\u65B9\\u5F0F'}\\n            image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}\\n            darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}\\n            description=\\\"\\u4F7F\\u7528 Semi D2C \\u5FEB\\u901F\\u8FD8\\u539F Figma \\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u4E00\\u952E\\u8F6C\\u4EE3\\u7801\\\"\\n            style={{ width: 400, margin: '0 auto', display: 'flex', padding: 20 }}\\n        />\\n    );\\n    const [visible, setVisible] = useState(false);\\n    return (\\n        <Popover visible={visible} content={content} trigger=\\\"custom\\\">\\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        </Popover>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u663E\\u793A\\u5C0F\\u4E09\\u89D2\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showArrow\"), \", Popover \\u540C\\u6837\\u4E5F\\u652F\\u6301\\u5C55\\u793A\\u4E00\\u4E2A\\u5C0F\\u4E09\\u89D2\\u3002\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u8FD9\\u79CD\\u6A21\\u5F0F\\u4E0B\\u6D6E\\u5C42\\u4F1A\\u62E5\\u6709\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u7684\\u6837\\u5F0F\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u9012 style \\u53C2\\u6570\\u6765\\u8986\\u76D6\\u6389\\u3002\")), 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 { Popover, 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 style={{ paddingLeft: 40 }} className=\\\"tag-margin-right\\\">\\n            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>\\n                {tops.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ width: 40, float: 'left' }}>\\n                {lefts.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ width: 40, marginLeft: 180 }}>\\n                {rights.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>\\n                {bottoms.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\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  }, \"\\u5728\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u663E\\u793A\\u5C0F\\u4E09\\u89D2\"), \"\\u7684\\u6761\\u4EF6\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showArrow=true\"), \"\\uFF09\\u4E0B\\uFF0C\\u53EF\\u4EE5\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"arrowPointAtCenter=true\"), \" \\u4F7F\\u5F97\\u5C0F\\u4E09\\u89D2\\u59CB\\u7EC8\\u6307\\u5411\\u5143\\u7D20\\u4E2D\\u5FC3\\u4F4D\\u7F6E\\u3002\"), 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 { Popover, 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 style={{ paddingLeft: 40 }} className=\\\"tag-margin-right\\\">\\n            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>\\n                {tops.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        arrowPointAtCenter\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ width: 40, float: 'left' }}>\\n                {lefts.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        arrowPointAtCenter\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ width: 40, marginLeft: 180 }}>\\n                {rights.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        arrowPointAtCenter\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\n                ))}\\n            </div>\\n            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>\\n                {bottoms.map((pos, index) => (\\n                    <Popover\\n                        showArrow\\n                        arrowPointAtCenter\\n                        content={\\n                            <article>\\n                                Hi ByteDancer, this is a popover.\\n                                <br /> We have 2 lines.\\n                            </article>\\n                        }\\n                        position={Array.isArray(pos) ? pos[0] : pos}\\n                        key={index}\\n                    >\\n                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>\\n                    </Popover>\\n                ))}\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u6D6E\\u5C42\\u80CC\\u666F\\u8272\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u9700\\u8981\\u5B9A\\u5236\\u6D6E\\u5C42\\u7684\\u80CC\\u666F\\u8272\\u6216\\u8FB9\\u6846\\u989C\\u8272\\uFF0C\\u8BF7\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u52A1\\u5FC5\\u5355\\u72EC\\u58F0\\u660E \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"style\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"backgroundColor\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"borderColor\"), \" \\u5C5E\\u6027\"), \"\\uFF0C\\u8FD9\\u6837\\u80FD\\u591F\\u4F7F\\u5F97\\u201C\\u5C0F\\u4E09\\u89D2\\u201D\\u4E5F\\u80FD\\u5E94\\u7528\\u76F8\\u540C\\u7684\\u80CC\\u666F\\u8272\\u548C\\u8FB9\\u6846\\u989C\\u8272\\u3002\"), 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 { Popover, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div id='popup-parent' style={{ position: 'relative' }}>\\n            <Popover\\n                content={\\n                    <article style={{ padding: 4 }}>\\n                        Hi, Semi UI Popover.\\n                    </article>\\n                }\\n                getPopupContainer={() => document.querySelector('#popup-parent')}\\n                trigger='custom'\\n                visible\\n                position='right'\\n                showArrow\\n                style={{\\n                    backgroundColor: 'rgba(var(--semi-blue-4),1)',\\n                    borderColor: 'rgba(var(--semi-blue-4),1)',\\n                    color: 'var(--semi-color-white)',\\n                    borderWidth: 1,\\n                    borderStyle: 'solid',\\n                }}\\n            >\\n                <Tag\\n                    style={{\\n                        backgroundColor: 'rgba(var(--semi-blue-4),1)',\\n                        color: 'var(--semi-color-white)'\\n                    }}\\n                >\\n                    Colorful Popover\\n                </Tag>\\n            </Popover>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u521D\\u59CB\\u5316\\u5F39\\u51FA\\u5C42\\u7126\\u70B9\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Popover content \\u652F\\u6301\\u4F20\\u5165\\u51FD\\u6570\\uFF0C\\u5B83\\u7684\\u5165\\u53C2\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initialFocusRef\"), \" \\u7ED1\\u5B9A\\u5728\\u53EF\\u805A\\u7126 DOM \\u6216\\u7EC4\\u4EF6\\u4E0A\\uFF0C\\u6253\\u5F00\\u9762\\u677F\\u65F6\\u4F1A\\u81EA\\u52A8\\u805A\\u7126\\u5728\\u8BE5\\u4F4D\\u7F6E\\u3002\"), 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 { Button, Input, Popover, Space } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const renderContent = ({ initialFocusRef }) => {\\n        return (\\n            <div style={{ padding: 12 }}>\\n                <Space>\\n                    <Button>first focusable element</Button>\\n                    <Input ref={initialFocusRef} placeholder=\\\"focus here\\\" />\\n                </Space>\\n            </div>\\n        );\\n    };\\n\\n    return (\\n        <Popover content={renderContent} trigger=\\\"click\\\">\\n            <Button>click me</Button>\\n        </Popover>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u642D\\u914D Tooltip \\u6216 Popconfirm \\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BF7\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/tooltip#%E6%90%AD%E9%85%8D%20Popover%20%E6%88%96%20Popconfirm%20%E4%BD%BF%E7%94%A8\"\n  }, \"\\u642D\\u914D\\u4F7F\\u7528\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), 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  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u8C03\\u6574\\u5F39\\u51FA\\u5C42\\u5C55\\u5F00\\u65B9\\u5411\\uFF0C\\u7528\\u4E8E\\u8FB9\\u7F18\\u906E\\u6321\\u65F6\\u81EA\\u52A8\\u8C03\\u6574\\u5C55\\u5F00\\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  }, \"\\\"\\u5C0F\\u4E09\\u89D2\\\"\\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  }, \"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  }, \"closeOnEsc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5728 trigger \\u6216 \\u5F39\\u51FA\\u5C42\\u6309 Esc \\u952E\\u662F\\u5426\\u5173\\u95ED\\u9762\\u677F\\uFF0C\\u53D7\\u63A7\\u65F6\\u4E0D\\u751F\\u6548\"), 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(\"strong\", {\n    parentName: \"td\"\n  }, \"2.8.0\"))), 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  }, \"\\u663E\\u793A\\u7684\\u5185\\u5BB9\\uFF08\\u51FD\\u6570\\u7C7B\\u578B\\uFF0C2.8.0 \\u7248\\u672C\\u652F\\u6301\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" ({ initialFocusRef }) => 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  }, \"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  }, \"true\"), 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  }, \"guardFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u7126\\u70B9\\u5904\\u4E8E\\u5F39\\u51FA\\u5C42\\u5185\\u65F6\\uFF0C\\u5207\\u6362 Tab \\u662F\\u5426\\u8BA9\\u7126\\u70B9\\u5728\\u5F39\\u51FA\\u5C42\\u5185\\u5FAA\\u73AF\"), 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(\"strong\", {\n    parentName: \"td\"\n  }, \"2.8.0\"))), 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  }, \"\\u5F39\\u51FA\\u5C42\\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\"), \"\\uFF0C\\u4F5C\\u7528\\u540C Tooltip margin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\"), 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.25.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 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  }, \"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  }, \"returnFocusOnClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6309\\u4E0B Esc \\u952E\\u540E\\uFF0C\\u7126\\u70B9\\u662F\\u5426\\u56DE\\u5230 trigger \\u4E0A\\uFF0C\\u8BBE\\u7F6E trigger \\u4E3A hover, focus, click \\u65F6\\u751F\\u6548\"), 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(\"strong\", {\n    parentName: \"td\"\n  }, \"2.8.0\"))), 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  }, \"\\u65B9\\u5411\\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  }, \"\\\"bottom\\\"\"), 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 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  }, \"4(showArrow=false \\u65F6) 10(showArrow=true \\u65F6)\"), 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\\u201C\\u5C0F\\u4E09\\u89D2\\u201D\"), 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  }, \"stopPropagation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u963B\\u6B62\\u5F39\\u51FA\\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  }, \"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  }, \"trigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E6\\u53D1\\u65B9\\u5F0F\\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\"), \"\\uFF08v2.42\\u652F\\u6301\\uFF09\"), 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\\u663E\\u793A\\uFF0C\\u914D\\u5408trigger='custom'\\u53EF\\u5B9E\\u73B0\\u5B8C\\u5168\\u53D7\\u63A7\"), 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  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42 z-index \\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1030\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onEscKeyDown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5728 trigger \\u6216 \\u5F39\\u51FA\\u5C42\\u6309 Esc \\u952E\\u65F6\\u8C03\\u7528\"), 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.8.0\"))), 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(\"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  }, \"\\u5173\\u4E8E role\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Popover \\u7684 trigger \\u4E3A click\\u3001custom\\u65F6\\uFF0CPopover\\u7684 content \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dialog\"), \" role\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53trigger\\u4E3Ahover\\u65F6\\uFF0CPopover\\u7684content \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"tooltip\"), \" role\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Popover \\u7684 content\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"content \\u7684 wrapper \\u4F1A\\u88AB\\u81EA\\u52A8\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"id\"), \" \\u5C5E\\u6027\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Popover \\u7684 children \", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F1A\\u88AB\\u81EA\\u52A8\\u6DFB\\u52A0 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.w3.org/TR/wai-aria-1.1/#aria-expanded\"\n  }, \"aria-expanded\"), \" \\u5C5E\\u6027\\uFF0C\\u5F53 Popover \\u53EF\\u89C1\\u65F6\\uFF0C\\u5C5E\\u6027\\u503C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"true\"), \"\\uFF0C\\u4E0D\\u53EF\\u89C1\\u65F6\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"false\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F1A\\u88AB\\u81EA\\u52A8\\u6DFB\\u52A0 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\"\n  }, \"aria-haspopup\"), \" \\u5C5E\\u6027\\uFF0C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dialog\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F1A\\u88AB\\u81EA\\u52A8\\u6DFB\\u52A0 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.w3.org/TR/wai-aria-1.1/#aria-controls\"\n  }, \"aria-controls\"), \" \\u5C5E\\u6027\\uFF0C\\u4E3A content \\u7684 wrapper \\u7684 id\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Popover \\u89E6\\u53D1\\u65B9\\u5F0F\\u8BBE\\u7F6E\\u4E3A hover \\u65F6\\uFF1A\\u9F20\\u6807\\u60AC\\u6D6E\\u6216\\u805A\\u7126\\u65F6\\u6253\\u5F00 Popover\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Popover \\u89E6\\u53D1\\u65B9\\u5F0F\\u8BBE\\u7F6E\\u4E3A click \\u65F6\\uFF1A\\u70B9\\u51FB\\u89E6\\u53D1\\u5668\\u6216\\u805A\\u7126\\u65F6\\u5E76\\u4F7F\\u7528 Enter \\u952E\\u6253\\u5F00 Popover\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Popover \\u6FC0\\u6D3B\\u540E\\uFF0C\\u6309\\u4E0B\\u65B9\\u5411\\u952E \\u2B07\\uFE0F \\u5C06\\u7126\\u70B9\\u79FB\\u52A8\\u5230 Popover \\u4E0A\\uFF0C\\u6B64\\u65F6\\u7126\\u70B9\\u9ED8\\u8BA4\\u5904\\u4E8E Popover \\u4E2D\\u7B2C\\u4E00\\u4E2A\\u53EF\\u4EA4\\u4E92\\u5143\\u7D20\\u4E0A\\uFF0C\\u7528\\u6237\\u4E5F\\u53EF\\u81EA\\u5B9A\\u4E49\\u7126\\u70B9\\u4F4D\\u7F6E\\uFF08\\u82E5 Popover \\u5185\\u65E0\\u53EF\\u4EA4\\u4E92\\u5143\\u7D20\\u5219\\u8868\\u73B0\\u4E3A\\u65E0\\u54CD\\u5E94\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7126\\u70B9\\u5904\\u4E8E Popover \\u5185\\u65F6\\u4F7F\\u7528 Tab \\u952E\\uFF0C\\u7126\\u70B9\\u4F1A\\u5728 Popover \\u5185\\u5FAA\\u73AF\\uFF0C\\u4F7F\\u7528 Shift + Tab \\u4F1A\\u53CD\\u65B9\\u5411\\u79FB\\u52A8\\u7126\\u70B9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u952E\\u76D8\\u7528\\u6237\\u80FD\\u591F\\u901A\\u8FC7\\u6309 Esc \\u5173\\u95ED Popover\\uFF0C\\u5173\\u95ED\\u540E\\u7126\\u70B9\\u8FD4\\u56DE\\u5230\\u89E6\\u53D1\\u5668\\u4E0A\\uFF08\\u4EC5\\u5F53 trigger \\u4E3A click \\u65F6\\uFF09\"))), 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(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48 Popover \\u6D6E\\u5C42\\u5361\\u7247\\u7684\\u4F4D\\u7F6E\\u548C\\u6D6E\\u5C42\\u7684\\u89E6\\u53D1\\u5668\\u7684\\u76F8\\u5BF9\\u4F4D\\u7F6E\\u4E0D\\u7B26\\u5408\\u9884\\u671F?\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Popover \\u5E95\\u5C42\\u4F9D\\u8D56\\u4E86 Tooltip\\uFF0CTooltip \\u4E3A\\u4E86\\u8BA1\\u7B97\\u5B9A\\u4F4D\\uFF0C\\u9700\\u8981\\u83B7\\u53D6\\u5230 children \\u7684\\u771F\\u5B9E DOM \\u5143\\u7D20\\uFF0C\\u56E0\\u6B64 Popover \\u7C7B\\u578B\\u76EE\\u524D\\u652F\\u6301\\u5982\\u4E0B\\u7C7B\\u578B\\u7684 children\\uFF1A\"), mdx(\"ol\", {\n    parentName: \"li\"\n  }, 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(\"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(\"p\", {\n    parentName: \"li\"\n  }, \"\\u82E5\\u901A\\u8FC7 ref \\u6216 findDOMNode \\u83B7\\u53D6\\u5230\\u7684\\u771F\\u5B9E DOM \\u8282\\u70B9\\u5BBD\\u9AD8\\u5E76\\u975E\\u662F\\u4F60\\u7684 children \\u5143\\u7D20\\u7684\\u5168\\u90E8\\uFF0C\\u5219\\u4F4D\\u7F6E\\u53EF\\u80FD\\u6709\\u51FA\\u5165\\u3002\\u4F8B\\u5982\\u8BBE\\u7F6E\\u4E86 prefix\\u3001suffix \\u7684 Input\\uFF0CPopover\\u4F4D\\u7F6E\\u4ECD\\u662F\\u76F8\\u5BF9\\u4E8E\\u4E0D\\u5305\\u542B\\u524D\\u7F00\\u90E8\\u5206\\u7684 input \\u6846\\u8FDB\\u884C\\u5B9A\\u4F4D\\uFF0C\\u6B64\\u65F6\\u53EA\\u8981\\u5728 Input \\u5916\\u5C42\\u518D\\u5957\\u4E00\\u4E2A div \\u5C31\\u80FD\\u89E3\\u51B3\\u95EE\\u9898\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48 Popover \\u6D6E\\u5C42\\u5361\\u7247\\u5728\\u9760\\u8FD1\\u5C4F\\u5E55\\u8FB9\\u754C\\u5BBD\\u5EA6\\u4E0D\\u591F\\u65F6\\uFF0C\\u4E22\\u5931\\u5BBD\\u5EA6\\u610F\\u5916\\u6362\\u884C?\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5728 chromium 104 \\u540E \\u5BF9\\u4E8E\\u5C4F\\u5E55\\u8FB9\\u754C\\u6587\\u672C\\u5BBD\\u5EA6\\u4E0D\\u591F\\u65F6\\u7684\\u6362\\u884C\\u6E32\\u67D3\\u7B56\\u7565\\u53D1\\u751F\\u53D8\\u5316\\uFF0C\\u8BE6\\u7EC6\\u539F\\u56E0\\u53EF\\u67E5\\u770B \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/1022\"\n  }, \"issue #1022\"), \"\\uFF0Csemi\\u4FA7\\u5DF2\\u7ECF\\u5728v2.17.0\\u7248\\u672C\\u4FEE\\u590D\\u4E86\\u8FD9\\u4E2A\\u95EE\\u9898\\u3002\")))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/popover","next":{"fields":{"slug":"en-US/show/scrolllist"},"id":"bc9ba55c-e171-545a-9a93-24399eb0cf45","frontmatter":{"title":"ScrollList","localeCode":"en-US","icon":"doc-scrolllist","showNew":null}},"previous":{"fields":{"slug":"en-US/show/popover"},"id":"bb3f12e2-a788-5884-9256-a6ab7491b056","frontmatter":{"title":"Popover","localeCode":"en-US","icon":"doc-popover","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}