ant-design-vue/5b9017f1.async.js

1 line
54 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{1219:function(t,s,a){},1315:function(t,s,a){"use strict";var n=a(1219);a.n(n).a},1465:function(t,s,a){"use strict";a.r(s);var n=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-tooltip>\n <template slot="title">\n prompt text\n </template>\n Tooltip will show when mouse enter.\n </a-tooltip>\n',script:null,style:null,us:"\n#### Basic\nThe simplest usage.\n",cn:"\n#### 基本\n最简单的用法。\n",sourceCode:'<template>\n <a-tooltip>\n <template slot="title">\n prompt text\n </template>\n Tooltip will show when mouse enter.\n </a-tooltip>\n</template>\n'}}},[a("template",{slot:"component"},[a("a-tooltip",[a("template",{slot:"title"},[t._v("\n prompt text\n ")]),t._v("\n Tooltip will show when mouse enter.\n ")],2)],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"基本"}},[t._v("基本 "),a("a",{staticClass:"anchor",attrs:{href:"#基本"}},[t._v("#")])]),t._v(" "),a("p",[t._v("最简单的用法。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Basic"}},[t._v("Basic "),a("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The simplest usage.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n prompt text\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n Tooltip will show when mouse enter.\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};n._withStripped=!0;var l=a(31),e=Object(l.a)({},n,[],!1,null,null,null);e.options.__file="components/tooltip/demo/basic.md";var v=e.exports,p=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-tooltip placement="topLeft" title="Prompt Text">\n <a-button>Align edge / 边缘对齐</a-button>\n </a-tooltip>\n <a-tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter="">\n <a-button>Arrow points to center / 箭头指向中心</a-button>\n </a-tooltip>\n </div>\n',script:null,style:null,us:"\n#### Arrow pointing at the center\nBy specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element.\n",cn:"\n#### 箭头指向\n设置了 `arrowPointAtCenter` 后,箭头将指向目标元素的中心。\n",sourceCode:'<template>\n <div>\n <a-tooltip placement="topLeft" title="Prompt Text">\n <a-button>Align edge / 边缘对齐</a-button>\n </a-tooltip>\n <a-tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>\n <a-button>Arrow points to center / 箭头指向中心</a-button>\n </a-tooltip>\n </div>\n</template>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-tooltip",{attrs:{placement:"topLeft",title:"Prompt Text"}},[a("a-button",[t._v("Align edge / 边缘对齐")])],1),t._v(" "),a("a-tooltip",{attrs:{placement:"topLeft",title:"Prompt Text",arrowPointAtCenter:""}},[a("a-button",[t._v("Arrow points to center / 箭头指向中心")])],1)],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"箭头指向"}},[t._v("箭头指向 "),a("a",{staticClass:"anchor",attrs:{href:"#箭头指向"}},[t._v("#")])]),t._v(" "),a("p",[t._v("设置了 "),a("code",[t._v("arrowPointAtCenter")]),t._v(" 后,箭头将指向目标元素的中心。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Arrow-pointing-at-the-center"}},[t._v("Arrow pointing at the center "),a("a",{staticClass:"anchor",attrs:{href:"#Arrow-pointing-at-the-center"}},[t._v("#")])]),t._v(" "),a("p",[t._v("By specifying "),a("code",[t._v("arrowPointAtCenter")]),t._v(" prop, the arrow will point to the center of the target element.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topLeft"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Prompt Text"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Align edge / 边缘对齐"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topLeft"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Prompt Text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("arrowPointAtCenter")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Arrow points to center / 箭头指向中心"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};p._withStripped=!0;var _=Object(l.a)({},p,[],!1,null,null,null);_.options.__file="components/tooltip/demo/arrow-point-at-center.md";var o=_.exports,i=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div :style="wrapStyles">\n <a-tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">\n <a-button>Adjust automatically / 自动调整</a-button>\n </a-tooltip>\n <br/>\n <a-tooltip style="marginTop: 10px" placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">\n <a-button>Ingore / 不处理</a-button>\n </a-tooltip>\n </div>\n',script:"\n const wrapStyles = {\n overflow: 'hidden',\n position: 'relative',\n padding: '24px',\n border: '1px solid #e9e9e9',\n };\n export default {\n data() {\n return {\n wrapStyles,\n };\n },\n methods: {\n getPopupContainer(trigger) {\n return trigger.parentElement;\n },\n },\n };\n",style:null,us:"\n#### Adjust placement automatically\nAdjust popup placement automatically when popup is invisible\n",cn:"\n#### 自动调整位置\n气泡框不可见时自动调整位置\n",sourceCode:'<template>\n <div :style="wrapStyles">\n <a-tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">\n <a-button>Adjust automatically / 自动调整</a-button>\n </a-tooltip>\n <br />\n <a-tooltip\n style="marginTop: 10px"\n placement="left"\n title="Prompt Text"\n :getPopupContainer="getPopupContainer"\n :autoAdjustOverflow="false"\n >\n <a-button>Ingore / 不处理</a-button>\n </a-tooltip>\n </div>\n</template>\n<script>\n const wrapStyles = {\n overflow: \'hidden\',\n position: \'relative\',\n padding: \'24px\',\n border: \'1px solid #e9e9e9\',\n };\n export default {\n data() {\n return {\n wrapStyles,\n };\n },\n methods: {\n getPopupContainer(trigger) {\n return trigger.parentElement;\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",{style:t.wrapStyles},[a("a-tooltip",{attrs:{placement:"left",title:"Prompt Text",getPopupContainer:t.getPopupContainer}},[a("a-button",[t._v("Adjust automatically / 自动调整")])],1),t._v(" "),a("br"),t._v(" "),a("a-tooltip",{staticStyle:{marginTop:"10px"},attrs:{placement:"left",title:"Prompt Text",getPopupContainer:t.getPopupContainer,autoAdjustOverflow:!1}},[a("a-button",[t._v("Ingore / 不处理")])],1)],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自动调整位置"}},[t._v("自动调整位置 "),a("a",{staticClass:"anchor",attrs:{href:"#自动调整位置"}},[t._v("#")])]),t._v(" "),a("p",[t._v("气泡框不可见时自动调整位置")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Adjust-placement-automatically"}},[t._v("Adjust placement automatically "),a("a",{staticClass:"anchor",attrs:{href:"#Adjust-placement-automatically"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Adjust popup placement automatically when popup is invisible")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"wrapStyles"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"left"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Prompt Text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":getPopupContainer")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"getPopupContainer"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Adjust automatically / 自动调整"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"marginTop: 10px"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"left"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Prompt Text"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":getPopupContainer")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"getPopupContainer"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":autoAdjustOverflow")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"false"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Ingore / 不处理"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" wrapStyles = {\n "),a("span",{staticClass:"hljs-attr"},[t._v("overflow")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'hidden'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("position")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'relative'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("padding")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'24px'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("border")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1px solid #e9e9e9'")]),t._v(",\n };\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n wrapStyles,\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n getPopupContainer(trigger) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" trigger.parentElement;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};i._withStripped=!0;var c={overflow:"hidden",position:"relative",padding:"24px",border:"1px solid #e9e9e9"},r={data:function(){return{wrapStyles:c}},methods:{getPopupContainer:function(t){return t.parentElement}}},h=Object(l.a)(r,i,[],!1,null,null,null);h.options.__file="components/tooltip/demo/auto-adjust-overflow.md";var m=h.exports,d=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div id="components-a-tooltip-demo-placement">\n <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: \'nowrap\' }">\n <a-tooltip placement="topLeft">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>TL</a-button>\n </a-tooltip>\n <a-tooltip placement="top">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Top</a-button>\n </a-tooltip>\n <a-tooltip placement="topRight">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>TR</a-button>\n </a-tooltip>\n </div>\n <div :style="{ width: `${buttonWidth}px`, float: \'left\' }">\n <a-tooltip placement="leftTop">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>LT</a-button>\n </a-tooltip>\n <a-tooltip placement="left">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Left</a-button>\n </a-tooltip>\n <a-tooltip placement="leftBottom">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>LB</a-button>\n </a-tooltip>\n </div>\n <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">\n <a-tooltip placement="rightTop">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>RT</a-button>\n </a-tooltip>\n <a-tooltip placement="right">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Right</a-button>\n </a-tooltip>\n <a-tooltip placement="rightBottom">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>RB</a-button>\n </a-tooltip>\n </div>\n <div :style="{ marginLeft: `${buttonWidth}px`, clear: \'both\', whiteSpace: \'nowrap\' }">\n <a-tooltip placement="bottomLeft">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>BL</a-button>\n </a-tooltip>\n <a-tooltip placement="bottom">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Bottom</a-button>\n </a-tooltip>\n <a-tooltip placement="bottomRight">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>BR</a-button>\n </a-tooltip>\n </div>\n </div>\n',script:"\n export default {\n data() {\n return {\n buttonWidth: 70,\n };\n },\n };\n",style:null,us:"\n#### Placement\nThe ToolTip has 12 placements choice.\n",cn:"\n#### 位置\n位置有 12 个方向。\n",sourceCode:'<template>\n <div id="components-a-tooltip-demo-placement">\n <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: \'nowrap\' }">\n <a-tooltip placement="topLeft">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>TL</a-button>\n </a-tooltip>\n <a-tooltip placement="top">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Top</a-button>\n </a-tooltip>\n <a-tooltip placement="topRight">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>TR</a-button>\n </a-tooltip>\n </div>\n <div :style="{ width: `${buttonWidth}px`, float: \'left\' }">\n <a-tooltip placement="leftTop">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>LT</a-button>\n </a-tooltip>\n <a-tooltip placement="left">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Left</a-button>\n </a-tooltip>\n <a-tooltip placement="leftBottom">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>LB</a-button>\n </a-tooltip>\n </div>\n <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">\n <a-tooltip placement="rightTop">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>RT</a-button>\n </a-tooltip>\n <a-tooltip placement="right">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Right</a-button>\n </a-tooltip>\n <a-tooltip placement="rightBottom">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>RB</a-button>\n </a-tooltip>\n </div>\n <div :style="{ marginLeft: `${buttonWidth}px`, clear: \'both\', whiteSpace: \'nowrap\' }">\n <a-tooltip placement="bottomLeft">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>BL</a-button>\n </a-tooltip>\n <a-tooltip placement="bottom">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>Bottom</a-button>\n </a-tooltip>\n <a-tooltip placement="bottomRight">\n <template slot="title">\n <span>prompt text</span>\n </template>\n <a-button>BR</a-button>\n </a-tooltip>\n </div>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n buttonWidth: 70,\n };\n },\n };\n<\/script>\n<style scoped>\n #components-a-tooltip-demo-placement .ant-btn {\n width: 70px;\n text-align: center;\n padding: 0;\n margin-right: 8px;\n margin-bottom: 8px;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",{attrs:{id:"components-a-tooltip-demo-placement"}},[a("div",{style:{marginLeft:t.buttonWidth+"px",whiteSpace:"nowrap"}},[a("a-tooltip",{attrs:{placement:"topLeft"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("TL")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"top"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("Top")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"topRight"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("TR")])],2)],1),t._v(" "),a("div",{style:{width:t.buttonWidth+"px",float:"left"}},[a("a-tooltip",{attrs:{placement:"leftTop"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("LT")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"left"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("Left")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"leftBottom"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("LB")])],2)],1),t._v(" "),a("div",{style:{width:t.buttonWidth+"px",marginLeft:4*t.buttonWidth+24+"px"}},[a("a-tooltip",{attrs:{placement:"rightTop"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("RT")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"right"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("Right")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"rightBottom"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("RB")])],2)],1),t._v(" "),a("div",{style:{marginLeft:t.buttonWidth+"px",clear:"both",whiteSpace:"nowrap"}},[a("a-tooltip",{attrs:{placement:"bottomLeft"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("BL")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"bottom"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("Bottom")])],2),t._v(" "),a("a-tooltip",{attrs:{placement:"bottomRight"}},[a("template",{slot:"title"},[a("span",[t._v("prompt text")])]),t._v(" "),a("a-button",[t._v("BR")])],2)],1)])]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"位置"}},[t._v("位置 "),a("a",{staticClass:"anchor",attrs:{href:"#位置"}},[t._v("#")])]),t._v(" "),a("p",[t._v("位置有 12 个方向。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Placement"}},[t._v("Placement "),a("a",{staticClass:"anchor",attrs:{href:"#Placement"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The ToolTip has 12 placements choice.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("id")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"components-a-tooltip-demo-placement"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }\"")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topLeft"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("TL"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"top"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Top"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topRight"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("TR"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ width: `${buttonWidth}px`, float: 'left' }\"")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"leftTop"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("LT"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"left"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Left"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"leftBottom"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("LB"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"rightTop"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("RT"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"right"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Right"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"rightBottom"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("RB"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }\"")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"bottomLeft"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("BL"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"bottom"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Bottom"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"bottomRight"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("prompt text"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("BR"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tooltip")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("buttonWidth")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("70")]),t._v(",\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-id"},[t._v("#components-a-tooltip-demo-placement")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-btn")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("70px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("text-align")]),t._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};d._withStripped=!0;var C={data:function(){return{buttonWidth:70}}},j=(a(1315),Object(l.a)(C,d,[],!1,null,"28e853c6",null));j.options.__file="components/tooltip/demo/placement.md";var g=j.exports,u=function(){var t=this.$createElement;this._self._c;return this._m(0)};u._withStripped=!0;var b=Object(l.a)({},u,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("提示文字")]),t._v(" "),a("td",[t._v("string|slot")]),t._v(" "),a("td",[t._v("无")])])])]),t._v(" "),a("h3",{attrs:{id:"共同的-API"}},[t._v("共同的 API "),a("a",{staticClass:"anchor",attrs:{href:"#共同的-API"}},[t._v("#")])]),t._v(" "),a("p",[t._v("以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("arrowPointAtCenter")]),t._v(" "),a("td",[t._v("箭头是否指向目标元素中心")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("autoAdjustOverflow")]),t._v(" "),a("td",[t._v("气泡被遮挡时自动调整位置")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("true")])])]),t._v(" "),a("tr",[a("td",[t._v("defaultVisible")]),t._v(" "),a("td",[t._v("默认是否显隐")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("getPopupContainer")]),t._v(" "),a("td",[t._v("浮层渲染父节点,默认渲染到 body 上")]),t._v(" "),a("td",[t._v("Function(triggerNode)")]),t._v(" "),a("td",[t._v("() => document.body")])]),t._v(" "),a("tr",[a("td",[t._v("mouseEnterDelay")]),t._v(" "),a("td",[t._v("鼠标移入后延时多少才显示 Tooltip单位秒")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("0")])]),t._v(" "),a("tr",[a("td",[t._v("mouseLeaveDelay")]),t._v(" "),a("td",[t._v("鼠标移出后延时多少才隐藏 Tooltip单位秒")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("0.1")])]),t._v(" "),a("tr",[a("td",[t._v("overlayClassName")]),t._v(" "),a("td",[t._v("卡片类名")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("无")])]),t._v(" "),a("tr",[a("td",[t._v("overlayStyle")]),t._v(" "),a("td",[t._v("卡片样式")]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("无")])]),t._v(" "),a("tr",[a("td",[t._v("placement")]),t._v(" "),a("td",[t._v("气泡框位置,可选 "),a("code",{pre:!0},[t._v("top")]),t._v(" "),a("code",{pre:!0},[t._v("left")]),t._v(" "),a("code",{pre:!0},[t._v("right")]),t._v(" "),a("code",{pre:!0},[t._v("bottom")]),t._v(" "),a("code",{pre:!0},[t._v("topLeft")]),t._v(" "),a("code",{pre:!0},[t._v("topRight")]),t._v(" "),a("code",{pre:!0},[t._v("bottomLeft")]),t._v(" "),a("code",{pre:!0},[t._v("bottomRight")]),t._v(" "),a("code",{pre:!0},[t._v("leftTop")]),t._v(" "),a("code",{pre:!0},[t._v("leftBottom")]),t._v(" "),a("code",{pre:!0},[t._v("rightTop")]),t._v(" "),a("code",{pre:!0},[t._v("rightBottom")])]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("top")])]),t._v(" "),a("tr",[a("td",[t._v("trigger")]),t._v(" "),a("td",[t._v("触发行为,可选 "),a("code",{pre:!0},[t._v("hover/focus/click/contextmenu")])]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("hover")])]),t._v(" "),a("tr",[a("td",[t._v("visible(v-model)")]),t._v(" "),a("td",[t._v("用于手动控制浮层显隐")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("destroyTooltipOnHide")]),t._v(" "),a("td",[t._v("隐藏后是否销毁 tooltip")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("align")]),t._v(" "),a("td",[t._v("该值将合并到 placement 的配置中,设置参考 "),a("a",{attrs:{href:"https://github.com/yiminghe/dom-align"}},[t._v("dom-align")])]),t._v(" "),a("td",[t._v("Object")]),t._v(" "),a("td",[t._v("无")])])])]),t._v(" "),a("h3",{attrs:{id:"事件"}},[t._v("事件 "),a("a",{staticClass:"anchor",attrs:{href:"#事件"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名称")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("回调参数")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("visibleChange")]),t._v(" "),a("td",[t._v("显示隐藏的回调")]),t._v(" "),a("td",[t._v("(visible) => void")])])])]),t._v(" "),a("h2",{attrs:{id:"注意"}},[t._v("注意 "),a("a",{staticClass:"anchor",attrs:{href:"#注意"}},[t._v("#")])]),t._v(" "),a("p",[t._v("请确保 "),a("code",{pre:!0},[t._v("Tooltip")]),t._v(" 的子元素能接受 "),a("code",{pre:!0},[t._v("mouseenter")]),t._v("、"),a("code",{pre:!0},[t._v("mouseleave")]),t._v("、"),a("code",{pre:!0},[t._v("focus")]),t._v("、"),a("code",{pre:!0},[t._v("click")]),t._v(" 事件。")])])}],!1,null,null,null);b.options.__file="components/tooltip/index.zh-CN.md";var f=b.exports,x=function(){var t=this.$createElement;this._self._c;return this._m(0)};x._withStripped=!0;var w=Object(l.a)({},x,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("The text shown in the tooltip")]),t._v(" "),a("td",[t._v("string|slot")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"Common-API"}},[t._v("Common API "),a("a",{staticClass:"anchor",attrs:{href:"#Common-API"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The following APIs are shared by Tooltip, Popconfirm, Popover.")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("arrowPointAtCenter")]),t._v(" "),a("td",[t._v("Whether the arrow is pointed at the center of target")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("autoAdjustOverflow")]),t._v(" "),a("td",[t._v("Whether to adjust popup placement automatically when popup is off screen")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("true")])])]),t._v(" "),a("tr",[a("td",[t._v("defaultVisible")]),t._v(" "),a("td",[t._v("Whether the floating tooltip card is visible by default")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("getPopupContainer")]),t._v(" "),a("td",[t._v("The DOM container of the tip, the default behavior is to create a "),a("code",{pre:!0},[t._v("div")]),t._v(" element in "),a("code",{pre:!0},[t._v("body")]),t._v(".")]),t._v(" "),a("td",[t._v("Function(triggerNode)")]),t._v(" "),a("td",[t._v("() => document.body")])]),t._v(" "),a("tr",[a("td",[t._v("mouseEnterDelay")]),t._v(" "),a("td",[t._v("Delay in seconds, before tooltip is shown on mouse enter")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("0")])]),t._v(" "),a("tr",[a("td",[t._v("mouseLeaveDelay")]),t._v(" "),a("td",[t._v("Delay in seconds, before tooltip is hidden on mouse leave")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("0.1")])]),t._v(" "),a("tr",[a("td",[t._v("overlayClassName")]),t._v(" "),a("td",[t._v("Class name of the tooltip card")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("overlayStyle")]),t._v(" "),a("td",[t._v("Style of the tooltip card")]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("placement")]),t._v(" "),a("td",[t._v("The position of the tooltip relative to the target, which can be one of "),a("code",{pre:!0},[t._v("top")]),t._v(" "),a("code",{pre:!0},[t._v("left")]),t._v(" "),a("code",{pre:!0},[t._v("right")]),t._v(" "),a("code",{pre:!0},[t._v("bottom")]),t._v(" "),a("code",{pre:!0},[t._v("topLeft")]),t._v(" "),a("code",{pre:!0},[t._v("topRight")]),t._v(" "),a("code",{pre:!0},[t._v("bottomLeft")]),t._v(" "),a("code",{pre:!0},[t._v("bottomRight")]),t._v(" "),a("code",{pre:!0},[t._v("leftTop")]),t._v(" "),a("code",{pre:!0},[t._v("leftBottom")]),t._v(" "),a("code",{pre:!0},[t._v("rightTop")]),t._v(" "),a("code",{pre:!0},[t._v("rightBottom")])]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("top")])])]),t._v(" "),a("tr",[a("td",[t._v("trigger")]),t._v(" "),a("td",[t._v("Tooltip trigger mode")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("hover")]),t._v(" | "),a("code",{pre:!0},[t._v("focus")]),t._v(" | "),a("code",{pre:!0},[t._v("click")]),t._v(" | "),a("code",{pre:!0},[t._v("contextmenu")])]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("hover")])])]),t._v(" "),a("tr",[a("td",[t._v("visible(v-model)")]),t._v(" "),a("td",[t._v("Whether the floating tooltip card is visible or not")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("destroyTooltipOnHide")]),t._v(" "),a("td",[t._v("Whether to destroy tooltip on hide")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("align")]),t._v(" "),a("td",[t._v("this value will be merged into placement's config, please refer to the settings "),a("a",{attrs:{href:"https://github.com/yiminghe/dom-align"}},[t._v("dom-align")])]),t._v(" "),a("td",[t._v("Object")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"events"}},[t._v("events "),a("a",{staticClass:"anchor",attrs:{href:"#events"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Events Name")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Arguments")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("visibleChange")]),t._v(" "),a("td",[t._v("Callback executed when visibility of the tooltip card is changed")]),t._v(" "),a("td",[t._v("(visible) => void")])])])]),t._v(" "),a("h2",{attrs:{id:"Note"}},[t._v("Note "),a("a",{staticClass:"anchor",attrs:{href:"#Note"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Please ensure that the child node of "),a("code",{pre:!0},[t._v("Tooltip")]),t._v(" accepts "),a("code",{pre:!0},[t._v("mouseenter")]),t._v(", "),a("code",{pre:!0},[t._v("mouseleave")]),t._v(", "),a("code",{pre:!0},[t._v("focus")]),t._v(", "),a("code",{pre:!0},[t._v("click")]),t._v(" events.")])])}],!1,null,null,null);w.options.__file="components/tooltip/index.en-US.md";var y=w.exports,T="# Tooltip\n\n 简单的文字提示气泡框。\n\n ## 何时使用\n\n 鼠标移入则显示提示,移出消失,气泡浮层不承载复杂文本和操作。\n\n可用来代替系统默认的 'title' 提示,提供一个'按钮/文字/操作'的文案解释。\n ## 代码演示",P="# Tooltip\n\n A simple text popup tip.\n\n # When To Use\n\n - The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.\n - To provide an explanation of a 'button/text/operation'. It's often used instead of the html 'title' attribute.\n ## Examples\n ",A={category:"Components",subtitle:"文字提示",type:"Data Display",title:"Tooltip",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:T,us:P}}),t("br"),t(v),t("br"),t(g),t("br"),t(o),t("br"),t(m),t("br"),t("api",[t("template",{slot:"cn"},[t(f)]),t(y)])])}},L=Object(l.a)(A,void 0,void 0,!1,null,null,null);L.options.__file="components/tooltip/demo/index.vue";s.default=L.exports}}]);