@uiw/doc
Version:
UIW documentation website.
1 lines • 51.3 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[706],{4934:t=>{function e(t){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}e.keys=()=>[],e.resolve=e,e.id=4934,t.exports=e},5301:(t,e,n)=>{"use strict";n.d(e,{Z:()=>d});var o=n(8573),l=n(6320),r=n(8563),u=n(7622),i=n(7937);const a={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=n(4760);function p(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:e}=t,n=/^http/.test(e||"")?e:"https://github.com/uiwjs/uiw/blob/master/".concat(e);return(0,c.jsxs)("div",{className:a.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,c.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const s=l.ZP.Preview,f=l.ZP.Code,_=l.ZP.Toolbar,m=t=>{var e,n;let{node:u,components:i,data:a,...p}=t;const m=(0,o.useRef)(null),{headings:d,headingsList:g,...E}=p;(0,o.useEffect)((()=>{if(m.current){const t=m.current.parentElement;t&&t.parentElement&&t.parentElement.replaceChild(m.current,t)}}),[m]);const b=null===u||void 0===u||null===(e=u.position)||void 0===e?void 0:e.start.line,y=null===u||void 0===u||null===(n=u.data)||void 0===n?void 0:n.meta,h=(0,r.Mx)(y)||String(b),w=i["".concat(h)];if(h&&"function"===typeof w){const t=a[h].value||"",e=(0,r.aE)(y||"");return(0,c.jsxs)(l.ZP,{ref:m,children:[(0,c.jsx)(s,{style:{background:e.bg||"transparent"},children:(0,c.jsx)(w,{})}),(0,c.jsx)(_,{text:t,children:e.title||"Example"}),(0,c.jsx)(f,{children:(0,c.jsx)("pre",{...E})})]})}return(0,c.jsx)("code",{...E})};function d(t){return(0,c.jsxs)(o.Fragment,{children:[(0,c.jsx)(u.Z,{className:a.markdownWrap,source:t.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:e=>(0,c.jsx)(m,{...t,...e})}}),(0,c.jsx)(p,{path:t.path})]})}},9754:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>u});const o={components:{21:function(){var t,e=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{placement:"right",content:"\u53f3\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)")),e.default.createElement(o.Tooltip,{placement:"top",content:"\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{placement:"left",content:"\u5de6\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)")),e.default.createElement(o.Tooltip,{placement:"bottom",content:"\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)")),e.default.createElement(o.Tooltip,{placement:"top",content:"\u5df2\u88ab\u7981\u7528"},e.default.createElement(o.Button,{disabled:!0},"\u7981\u7528")))}}(),51:function(){var t,e=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function l(t){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},l(t)}function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function u(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?r(Object(n),!0).forEach((function(e){i(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function i(t,e,n){return(e=function(t){var e=function(t,e){if("object"!==l(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var o=n.call(t,e||"default");if("object"!==l(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"===l(e)?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a={position:"relative",width:70};return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{placement:"left",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)")),e.default.createElement(o.Tooltip,{placement:"top",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{placement:"bottom",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)")),e.default.createElement(o.Tooltip,{placement:"right",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)")),e.default.createElement(o.Divider,null),e.default.createElement("div",{style:{position:"relative"}},e.default.createElement(o.Tooltip,{placement:"topLeft",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:70})},"TL")),e.default.createElement(o.Tooltip,{placement:"top",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:70})},"Top")),e.default.createElement(o.Tooltip,{placement:"topRight",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:70})},"TR"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"leftTop",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u({},a)},"LT")),e.default.createElement(o.Tooltip,{placement:"rightTop",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:216})},"RT"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"left",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u({},a)},"Left")),e.default.createElement(o.Tooltip,{placement:"right",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:216})},"Right"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"leftBottom",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u({},a)},"LB")),e.default.createElement(o.Tooltip,{placement:"rightBottom",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:216})},"RB"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"bottomLeft",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:70})},"BL")),e.default.createElement(o.Tooltip,{placement:"bottom",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:70})},"Bottom")),e.default.createElement(o.Tooltip,{placement:"bottomRight",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:u(u({},a),{},{left:70})},"BR"))))}}(),131:function(){var t,e=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{trigger:"hover",placement:"top",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"primary"},"\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{trigger:"click",placement:"top",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"success"},"\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(top)")))}}(),152:function(){var t,e=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{visibleArrow:!1,trigger:"hover",placement:"top",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"primary"},"\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{visibleArrow:!1,trigger:"click",placement:"right",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"success"},"\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(right)")))}}(),173:function(){function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}var e,o=(e=n(8573))&&e.__esModule?e:{default:e},l=n(7937);function r(t,e){if(n=t,!(null!=(o=e)&&"undefined"!==typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](n):n instanceof o))throw new TypeError("Cannot call a class as a function");var n,o}function u(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,i(o.key),o)}}function i(e){var n=function(e,n){if("object"!==t(e)||null===e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var l=o.call(e,n||"default");if("object"!==t(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===t(n)?n:String(n)}function a(t,e){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},a(t,e)}function c(e){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var o,l=p(e);if(n){var r=p(this).constructor;o=Reflect.construct(l,arguments,r)}else o=l.apply(this,arguments);return function(e,n){if(n&&("object"===t(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}(this,o)}}function p(t){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},p(t)}return function(t){!function(t,e){if("function"!==typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&a(t,e)}(s,t);var e,n,i,p=c(s);function s(){var t;return r(this,s),(t=p.call(this)).state={isOpen:!1},t}return e=s,(n=[{key:"onChange",value:function(t){this.setState({isOpen:t.target.checked})}},{key:"onVisibleChange",value:function(t){this.setState({isOpen:t})}},{key:"render",value:function(){return o.default.createElement("div",null,o.default.createElement(l.Tooltip,{isOpen:this.state.isOpen,onVisibleChange:this.onVisibleChange.bind(this),placement:"top",content:"Hello uiw!"},o.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 Switch \u7ec4\u4ef6\u6765\u63a7\u5236")),o.default.createElement(l.Divider,null),o.default.createElement(l.Switch,{checked:this.state.isOpen,onChange:this.onChange.bind(this)}))}}])&&u(e.prototype,n),i&&u(e,i),Object.defineProperty(e,"prototype",{writable:!1}),s}(o.default.Component)}()},data:{21:{name:21,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "right",\n content: "\\u53F3\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u53F3\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(right)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "top",\n content: "\\u4E0A\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u4E0A\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "left",\n content: "\\u5DE6\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u5DE6\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(left)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "bottom",\n content: "\\u4E0B\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u4E0B\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(bottom)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "top",\n content: "\\u5DF2\\u88AB\\u7981\\u7528"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: true\n }, "\\u7981\\u7528")));\n};\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n <Tooltip placement="right" content="\u53f3\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n </Tooltip>\n <Tooltip placement="top" content="\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip placement="left" content="\u5de6\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n </Tooltip>\n <Tooltip placement="bottom" content="\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n </Tooltip>\n <Tooltip placement="top" content="\u5df2\u88ab\u7981\u7528">\n <Button disabled={true}>\u7981\u7528</Button>\n </Tooltip>\n </div>\n)\nexport default Demo;'},51:{name:51,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nvar btnStl = {\n position: \'relative\',\n width: 70\n};\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "left",\n content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary"\n }, "\\u5DE6\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(left)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "top",\n content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary"\n }, "\\u4E0A\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "bottom",\n content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary"\n }, "\\u4E0B\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(bottom)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "right",\n content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary"\n }, "\\u53F3\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(right)")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n position: \'relative\'\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "topLeft",\n content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 70\n })\n }, "TL")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "top",\n content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 70\n })\n }, "Top")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "topRight",\n content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 70\n })\n }, "TR"))), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n position: \'relative\',\n paddingTop: 10\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "leftTop",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread({}, btnStl)\n }, "LT")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "rightTop",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 216\n })\n }, "RT"))), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n position: \'relative\',\n paddingTop: 10\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "left",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread({}, btnStl)\n }, "Left")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "right",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 216\n })\n }, "Right"))), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n position: \'relative\',\n paddingTop: 10\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "leftBottom",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread({}, btnStl)\n }, "LB")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "rightBottom",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 216\n })\n }, "RB"))), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n position: \'relative\',\n paddingTop: 10\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "bottomLeft",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 70\n })\n }, "BL")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "bottom",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 70\n })\n }, "Bottom")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n placement: "bottomRight",\n content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: _objectSpread(_objectSpread({}, btnStl), {}, {\n left: 70\n })\n }, "BR"))));\n};\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button, Divider } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst Demo = () => (\n <div>\n <Tooltip placement="left" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n </Tooltip>\n\n <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n\n <Tooltip placement="bottom" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n </Tooltip>\n\n <Tooltip placement="right" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n </Tooltip>\n\n <Divider />\n <div style={{ position: \'relative\' }}>\n <Tooltip placement="topLeft" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n </Tooltip>\n <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\n </Tooltip>\n <Tooltip placement="topRight" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="leftTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>LT</Button>\n </Tooltip>\n <Tooltip placement="rightTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="left" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>Left</Button>\n </Tooltip>\n <Tooltip placement="right" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="leftBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>LB</Button>\n </Tooltip>\n <Tooltip placement="rightBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="bottomLeft" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n </Tooltip>\n <Tooltip placement="bottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n </Tooltip>\n <Tooltip placement="bottomRight" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n </Tooltip>\n </div>\n\n </div>\n)\nexport default Demo;'},131:{name:131,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n trigger: "hover",\n placement: "top",\n content: "Hello uiw!"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary"\n }, "\\u60AC\\u6D6E\\u5F39\\u51FA\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n trigger: "click",\n placement: "top",\n content: "Hello uiw!"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "success"\n }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u63D0\\u793A(top)")));\n};\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n <Tooltip trigger="hover" placement="top" content="Hello uiw!">\n <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip trigger="click" placement="top" content="Hello uiw!">\n <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(top)</Button>\n </Tooltip>\n </div>\n)\nexport default Demo;'},152:{name:152,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n visibleArrow: false,\n trigger: "hover",\n placement: "top",\n content: "Hello uiw!"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary"\n }, "\\u60AC\\u6D6E\\u5F39\\u51FA\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n visibleArrow: false,\n trigger: "click",\n placement: "right",\n content: "Hello uiw!"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "success"\n }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u63D0\\u793A(right)")));\n};\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n\n <Tooltip visibleArrow={false} trigger="hover" placement="top" content="Hello uiw!">\n <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip visibleArrow={false} trigger="click" placement="right" content="Hello uiw!">\n <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(right)</Button>\n </Tooltip>\n\n </div>\n)\nexport default Demo;'},173:{name:173,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n var _this;\n _classCallCheck(this, Demo);\n _this = _super.call(this);\n _this.state = {\n isOpen: false\n };\n return _this;\n }\n _createClass(Demo, [{\n key: "onChange",\n value: function onChange(e) {\n this.setState({\n isOpen: e.target.checked\n });\n }\n }, {\n key: "onVisibleChange",\n value: function onVisibleChange(isOpen) {\n this.setState({\n isOpen: isOpen\n });\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n isOpen: this.state.isOpen,\n onVisibleChange: this.onVisibleChange.bind(this),\n placement: "top",\n content: "Hello uiw!"\n }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 Switch \\u7EC4\\u4EF6\\u6765\\u63A7\\u5236")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Switch, {\n checked: this.state.isOpen,\n onChange: this.onChange.bind(this)\n }));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Tooltip, Switch, Divider } from 'uiw';\n\nclass Demo extends React.Component {\n constructor() {\n super()\n this.state = {\n isOpen: false,\n }\n }\n onChange(e) {\n this.setState({ isOpen: e.target.checked });\n }\n onVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n render() {\n return (\n <div>\n <Tooltip\n isOpen={this.state.isOpen}\n onVisibleChange={this.onVisibleChange.bind(this)}\n placement=\"top\"\n content=\"Hello uiw!\"\n >\n <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 Switch \u7ec4\u4ef6\u6765\u63a7\u5236</span>\n </Tooltip>\n <Divider />\n <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n </div>\n )\n }\n}\nexport default Demo;"}},source:'Tooltip \u6587\u5b57\u63d0\u793a\n===\n\n[](https://jaywcjlove.github.io/#/sponsor)\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tooltip/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-tooltip)\n[](https://npmjs.com/@uiw/react-tooltip)\n\n\u7b80\u5355\u7684\u6587\u5b57\u63d0\u793a\u6c14\u6ce1\u6846\u3002\n\n```jsx\nimport { Tooltip } from \'uiw\';\n// or\nimport Tooltip from \'@uiw/react-tooltip\';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n <Tooltip placement="right" content="\u53f3\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n </Tooltip>\n <Tooltip placement="top" content="\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip placement="left" content="\u5de6\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n </Tooltip>\n <Tooltip placement="bottom" content="\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n </Tooltip>\n <Tooltip placement="top" content="\u5df2\u88ab\u7981\u7528">\n <Button disabled={true}>\u7981\u7528</Button>\n </Tooltip>\n </div>\n)\nexport default Demo;\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 `12` \u4e2a\u65b9\u5411\uff0c\u6839\u636e `placement` \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Tooltip, Button, Divider } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst Demo = () => (\n <div>\n <Tooltip placement="left" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n </Tooltip>\n\n <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n\n <Tooltip placement="bottom" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n </Tooltip>\n\n <Tooltip placement="right" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n </Tooltip>\n\n <Divider />\n <div style={{ position: \'relative\' }}>\n <Tooltip placement="topLeft" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n </Tooltip>\n <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\n </Tooltip>\n <Tooltip placement="topRight" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="leftTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>LT</Button>\n </Tooltip>\n <Tooltip placement="rightTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="left" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>Left</Button>\n </Tooltip>\n <Tooltip placement="right" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="leftBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>LB</Button>\n </Tooltip>\n <Tooltip placement="rightBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="bottomLeft" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n </Tooltip>\n <Tooltip placement="bottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n </Tooltip>\n <Tooltip placement="bottomRight" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n </Tooltip>\n </div>\n\n </div>\n)\nexport default Demo;\n```\n\n### \u4e8b\u4ef6\n\n\u6587\u5b57\u63d0\u793a\u7ec4\u4ef6 `<Tooltip />`\uff0c\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 `trigger` \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u64cd\u4f5c\u65b9\u5f0f\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n <Tooltip trigger="hover" placement="top" content="Hello uiw!">\n <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip trigger="click" placement="top" content="Hello uiw!">\n <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(top)</Button>\n </Tooltip>\n </div>\n)\nexport default Demo;\n```\n\n### \u6587\u5b57\u63d0\u793a\u6846\u4e0d\u663e\u793a\u7bad\u5934\n\n\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 `visibleArrow` \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u6846\u4e0d\u663e\u793a\u7bad\u5934\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n\n <Tooltip visibleArrow={false} trigger="hover" placement="top" content="Hello uiw!">\n <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip visibleArrow={false} trigger="click" placement="right" content="Hello uiw!">\n <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(right)</Button>\n </Tooltip>\n\n </div>\n)\nexport default Demo;\n```\n\n### \u53d7\u63a7\u7ec4\u4ef6\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Tooltip, Switch, Divider } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super()\n this.state = {\n isOpen: false,\n }\n }\n onChange(e) {\n this.setState({ isOpen: e.target.checked });\n }\n onVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n render() {\n return (\n <div>\n <Tooltip\n isOpen={this.state.isOpen}\n onVisibleChange={this.onVisibleChange.bind(this)}\n placement="top"\n content="Hello uiw!"\n >\n <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 Switch \u7ec4\u4ef6\u6765\u63a7\u5236</span>\n </Tooltip>\n <Divider />\n <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n </div>\n )\n }\n}\nexport default Demo;\n```\n\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| content | \u663e\u793a\u7684\u5185\u5bb9 | String,React.ReactNode | - |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u901a\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a Tooltip \u7bad\u5934 | Boolean | `true` |\n| dela