{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/tooltip","result":{"data":{"current":{"frontmatter":{"title":"Tooltip","order":84,"brief":"Tooltip is used to identify an element or attach a small amount of auxiliary information. The most typical scenario is to explain the meaning of the icon to the user, display the truncated text, display the description of the picture, and so on.","icon":"doc-tooltip"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#cautions","title":"Cautions"},{"url":"#position","title":"Position"},{"url":"#arrow-point-at-center","title":"Arrow Point at Center"},{"url":"#trigger-timing","title":"Trigger Timing"},{"url":"#override-style","title":"Override Style"},{"url":"#render-to-specified-dom","title":"Render to Specified DOM"},{"url":"#use-with-popver-or-popconfirm","title":"Use with Popver or Popconfirm"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#faq","title":"FAQ"},{"url":"#related-material","title":"Related Material"}]},"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\": \"en-US\",\n  \"order\": 84,\n  \"category\": \"Show\",\n  \"title\": \"Tooltip\",\n  \"subTitle\": \"Tooltip\",\n  \"icon\": \"doc-tooltip\",\n  \"width\": \"65%\",\n  \"brief\": \"Tooltip is used to identify an element or attach a small amount of auxiliary information. The most typical scenario is to explain the meaning of the icon to the user, display the truncated text, display the description of the picture, and so on.\"\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  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), 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  }, \"Cautions\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Tooltip needs to apply DOM event listeners to children. If the child element is a custom component, you need to ensure that it can pass properties to the underlying DOM element \"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"At the same time, in order to calculate the positioning of the popup layer, it is necessary to obtain the real DOM elements of the children, so Tooltip supports the following types of children \"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Functional components wrapped with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"forwardRef\"), \" pass props and refs to the actual DOM nodes within their children.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Actual DOM nodes, such as span, div, p, etc.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Class components do not require mandatory ref binding, but must ensure that props can be passed to the actual DOM nodes. (\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Note\"), \": This rule only applies to React versions lower than v19; \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@douyinfe/semi-ui\"), \" is not applicable in React v19. See \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/start/react19#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9\"\n  }, \"React v19 Adaptation Notes\"), \")\")), 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// Spread the props to the underlying DOM element. binding ref\\nconst FCChildren = forwardRef((props, ref) => {\\n    return (<span {...props} ref={ref} style={style}>Functional Component</span>);\\n});\\n\\n// Spread the props to the underlying DOM element.\\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  }, \"Position\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The direction and alignment position of the popup layer can be configured through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \". For detailed optional values of position, please refer to the API document below \"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When configured as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topLeft\"), \", it pops up, and the popup layer is left-aligned with the children (when arrowPointAtCenter=false) .\\nWhen configured as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topRight\"), \", it pops up, and the popup layer is right-aligned with the children (when arrowPointAtCenter=false) .\\nSame for other directions\"), 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  }, \"Arrow Point at Center\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"arrowPointAtCenter=true\"), \", the small triangle always points to the center of the children element.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"You can set it to false and the little triangle will no longer keep pointing to the center of the element. The popover is aligned to the edges of the children \"), 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 }}>Arrow Point at Center</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 }}>Edge align</Button>\\n                </Tooltip>\\n            </div>\\n        </>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Trigger Timing\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Configure the timing of the trigger display, the default is \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"hover\"), \", optional \", 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\"), \" . \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When set to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"custom\"), \", it needs to be used in conjunction with the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"visible\"), \"attribute, at which point the display is completely controlled \")), 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, ButtonGroup, Input } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [visible, setVisible] = useState(false);\\n    // Container needs to set 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 style={{ marginBottom: 20 }}>Hover to show</Button>\\n                </Tooltip>\\n                <br />\\n                <Tooltip content={'hi bytedance'} trigger=\\\"click\\\" getPopupContainer={getPopupContainer}>\\n                    <Button style={{ marginBottom: 20 }}>Click to show</Button>\\n                </Tooltip>\\n                <br />\\n                <Tooltip content={'hi bytedance'} trigger=\\\"focus\\\" getPopupContainer={getPopupContainer}>\\n                    <Input style={{ width: 150, marginBottom: 20 }} placeholder=\\\"Focus to show\\\" />\\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                        <ButtonGroup>\\n                            <Button onClick={() => setVisible(true)}>Controlled show</Button>\\n                            <Button onClick={() => setVisible(false)}>Controlled hide</Button>\\n                        </ButtonGroup>\\n                    </span>\\n                </Tooltip>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Override Style\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Configure specific styles for the pop-up layer through the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"className\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" API, such as overriding the default maxWidth (240px)\"), 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        <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    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Render to Specified DOM\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"With \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getPopupContainer\"), \" the bullet layer will be rendered to the DOM returned by the function.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"It should be noted that:\"), \" The returned container, if not \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"document.body\"), \",\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"position\"), \" Will be set by default \", 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=\\\"Popup will be rendered in element#tooltip-wrapper\\\"\\n                trigger=\\\"click\\\"\\n                getPopupContainer={() => document.querySelector('#tooltip-wrapper')}\\n            >\\n                <Tag>Click here</Tag>\\n            </Tooltip>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Use with Popver or Popconfirm\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Tooltip, Popconfirm, and Popover all need to hijack related events of children (onMouseEnter / onMouseLeave / onClick ....) to configure \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"trigger\"), \". If used directly, it will invalidate the outer trigger.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Need to add a layer of elements (div or span) in the middle to prevent trigger event hijack failure.\"), 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 { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Popconfirm content=\\\"Are you sure to delete this comment\\\" title='Confirm Delete'>\\n        <span style={{ display: 'inline-block' }}>\\n            <Tooltip content={'Delete Comment'}>\\n                <Button type=\\\"danger\\\">Delete</Button>\\n            </Tooltip>\\n        </span>\\n    </Popconfirm>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Whether the floating layer automatically adjusts its direction when it is blocked\"), 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  }, \"Whether the \\\"small triangle\\\" points to the center of the element, you need to pass in \\\"showArrow = true\\\" at the same time\"), 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  }, \"Pop-up layer classname\"), 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  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Pop-up layer content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), 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  }, \"Whether to automatically close the elastic layer when clicking on the floating layer and any element inside\"), 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  }, \"When trigger is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"hover\"), \", does not respond to the keyboard focus popup event, see details at \", 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  }, \"Specifies the parent DOM, and the bullet layer will be rendered to the DOM  This will change the DOM tree position, but not the view's rendering position.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => 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  }, \"Whether to keep internal components from being destroyed when closing\"), 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  }, \"Calculate the added redundancy value when overflowing, see \", 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 { marginLeft: number; marginTop: number; marginRight: number; marginBottom: number }\"), 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  }, \"After the mouse is moved in, the display delay time, in milliseconds (only effective when the trigger is hover/focus)\"), 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  }, \"The time for the delay to disappear after the mouse is moved out, in milliseconds (only effective when the trigger is hover/focus), and is not less than 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  }, \"Whether to show the pop-up motion\"), 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  }, \"Pop-up layer display position, optional value: \", 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  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"className\"), \" prefix of the pop-up layer wrapper div. When this item is set, the pop-up layer will no longer have the style of Tooltip.\"), 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  }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), 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  }, \"This value can be updated to manually trigger the repositioning of the pop-up layer.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), 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  }, \"Pop-up layer inline style\"), 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  }, \"The distance between the pop-up layer and the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"children\"), \". object type props supported after v2.45 element\"), 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  }), 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  }, \"Does it show an arrow triangle?\"), 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  }, \"Whether to prevent click events on the bomb layer from bubbling\"), 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  }, \"Whether to transform from the horizontal or vertical center of the element of the package, this parameter affects only the `tansform-origin 'of the dynamic effect transformation and generally does not need to be changed\"), 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  }, \"Timing of triggering display, optional value: \", 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(\"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  }, \"Whether to show the pop-up layer, need to be used with trigger='custom'\"), 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  }, \"When children are disabled or children are multiple elements, the outer layer will wrap a layer of span elements, and the api is used to set the style class name of this span\"), 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  }, \"The id of the wrapper node of the popup layer. The aria attribute of the trigger points to this 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  }, \"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  }, \"Bullet levels.\"), 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  }, \"A callback triggered when the pop-up layer is displayed/hidden\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(isVisible: boolean) => void\"), 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  }, \"Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e:event) => void\"), 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 has a tooltip role, following the definition of Tooltip in the \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.w3.org/TR/wai-aria-practices/#tooltip\"\n  }, \"WAI-ARIA\"), \" specification\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tooltip's content and children\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"about content\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The wrapper of content will be automatically added with id attribute to match the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" of children and associate content with children\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"about children\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"There should be an explicit connection between the content of the Tooltip and its children. Tooltip will automatically add the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" attribute to the children element, the value is the id of the content wraper. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If the children of your Tooltip are Icon and do not contain visible text, we recommend that you add the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" attribute to the children to describe accordingly \")))))), 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  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Only display information description and guidance, do not display error information\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Only extra links and buttons not in tooltip\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Try to simplify the description to one sentence without showing punctuation marks\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), 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  }, \"Why do some forms of content not wrap when the content in Tooltip and Typography is very long?\"), mdx(\"br\", {\n    parentName: \"li\"\n  }), \"Before the v2.36.0 version, considering that different language content (e.g. English, Chinese, combination of English and Chinese) have inconsistent requirements for line breaks, so Semi does not use a default setting. After receiving a lot of usage feedback, since the v2.36.0 version, Tooltip has internally set \", 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\"), \" handles text wrapping for break-word. For any version, if the default settings are not as expected, the user can adjust the line break related CSS properties through the style/className API.\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Related Material\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"41\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/tooltip","next":{"fields":{"slug":"zh-CN/show/tooltip"},"id":"67ed9aaa-9de3-5021-bf7e-cf8905869acf","frontmatter":{"title":"Tooltip 工具提示","localeCode":"zh-CN","icon":"doc-tooltip","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/timeline"},"id":"a345d5b3-5a4e-5938-83ca-151d360c9f13","frontmatter":{"title":"Timeline 时间轴","localeCode":"zh-CN","icon":"doc-timeline","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}