(window.webpackJsonp=window.webpackJsonp||[]).push([[140],{740:function(n,a,t){"use strict";t.r(a),t.d(a,"default",function(){return F});var s=t(580),p=t.n(s),o=t(23),e=t.n(o),c=t(24),l=t.n(c),i=t(25),u=t.n(i),k=t(26),r=t.n(k),d=t(32),g=t.n(d),m=t(27),h=t.n(m),v=t(28),f=t.n(v),b=t(0),T=t.n(b),y=t(111),E=t(82),w=function(){return T.a.createElement("div",{className:"zent-doc-tooltip-container"},T.a.createElement(E.Fb,{trigger:"hover",title:"Hover Trigger"},T.a.createElement(E.i,{type:"primary"},"Hover")),T.a.createElement(E.Fb,{trigger:"click",title:"Click Trigger"},T.a.createElement(E.i,{type:"primary"},"Click")),T.a.createElement(E.Fb,{trigger:"focus",title:"Focus Trigger"},T.a.createElement(E.R,{defaultValue:"Focus"})))},z=function(){return T.a.createElement("div",{className:"zent-doc-tooltip-positions"},T.a.createElement("div",{className:"zent-doc-tooltip-positions-top-row"},T.a.createElement(E.Fb,{trigger:"hover",position:"top-left",title:"Top Left"},T.a.createElement(E.i,null,"TopLeft")),T.a.createElement(E.Fb,{trigger:"hover",position:"top-center",title:"Top Center"},T.a.createElement(E.i,null,"TopCenter")),T.a.createElement(E.Fb,{trigger:"hover",position:"top-right",title:"Top Right"},T.a.createElement(E.i,null,"TopRight"))),T.a.createElement("div",{className:"zent-doc-tooltip-positions-bottom-row"},T.a.createElement(E.Fb,{trigger:"hover",position:"bottom-left",title:"Bottom Left"},T.a.createElement(E.i,null,"BottomLeft")),T.a.createElement(E.Fb,{trigger:"hover",position:"bottom-center",title:"Bottom Center"},T.a.createElement(E.i,null,"BottomCenter")),T.a.createElement(E.Fb,{trigger:"hover",position:"bottom-right",title:"Bottom Right"},T.a.createElement(E.i,null,"BottomRight"))),T.a.createElement("div",{className:"zent-doc-tooltip-positions-left-col"},T.a.createElement(E.Fb,{trigger:"hover",position:"left-top",title:"Left Top"},T.a.createElement(E.i,null,"LeftTop")),T.a.createElement(E.Fb,{trigger:"hover",position:"left-center",title:"Left Center"},T.a.createElement(E.i,null,"LeftCenter")),T.a.createElement(E.Fb,{trigger:"hover",position:"left-bottom",title:"Left Bottom"},T.a.createElement(E.i,null,"LeftBottom"))),T.a.createElement("div",{className:"zent-doc-tooltip-positions-right-col"},T.a.createElement(E.Fb,{trigger:"hover",position:"right-top",title:"Right Top"},T.a.createElement(E.i,null,"RightTop")),T.a.createElement(E.Fb,{trigger:"hover",position:"right-center",title:"Right Center"},T.a.createElement(E.i,null,"RightCenter")),T.a.createElement(E.Fb,{trigger:"hover",position:"right-bottom",title:"Right Bottom"},T.a.createElement(E.i,null,"RightBottom"))))},B=function(){return T.a.createElement("div",{className:"zent-doc-tooltip-container"},T.a.createElement(E.Fb,{centerArrow:!0,trigger:"hover",position:"top-left",title:"centerArrow is true"},T.a.createElement("span",{className:"zent-doc-tooltip-tag"},"Y")),T.a.createElement(E.Fb,{trigger:"hover",position:"top-left",title:"centerArrow is false"},T.a.createElement("span",{className:"zent-doc-tooltip-tag"},"N")))},N=function(){var n=function(n){function a(){var n,t;e()(this,a);for(var s=arguments.length,p=new Array(s),o=0;oTooltip\n\n

Demos

'}),T.a.createElement(L,{title:"Three trigger modes: click, hover and focus",id:"Demotrigger",src:'import { Tooltip, Button, Input } from \'zent\';\n\nReactDOM.render(\n <div className="zent-doc-tooltip-container">\n <Tooltip trigger="hover" title="Hover Trigger">\n <Button type="primary">Hover</Button>\n </Tooltip>\n <Tooltip trigger="click" title="Click Trigger">\n <Button type="primary">Click</Button>\n </Tooltip>\n <Tooltip trigger="focus" title="Focus Trigger">\n <Input defaultValue="Focus" />\n </Tooltip>\n </div>\n , mountNode\n)'},T.a.createElement(w)),T.a.createElement(L,{title:"12 positions",id:"Demopositions",src:'import { Tooltip, Button } from \'zent\';\n\nconst trigger = \'hover\';\n\nReactDOM.render(\n <div className="zent-doc-tooltip-positions">\n <div className="zent-doc-tooltip-positions-top-row">\n <Tooltip trigger={trigger} position="top-left" title="Top Left">\n <Button>TopLeft</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="top-center" title="Top Center">\n <Button>TopCenter</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="top-right" title="Top Right">\n <Button>TopRight</Button>\n </Tooltip>\n </div>\n <div className="zent-doc-tooltip-positions-bottom-row">\n <Tooltip trigger={trigger} position="bottom-left" title="Bottom Left">\n <Button>BottomLeft</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="bottom-center" title="Bottom Center">\n <Button>BottomCenter</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="bottom-right" title="Bottom Right">\n <Button>BottomRight</Button>\n </Tooltip>\n </div>\n <div className="zent-doc-tooltip-positions-left-col">\n <Tooltip trigger={trigger} position="left-top" title="Left Top">\n <Button>LeftTop</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="left-center" title="Left Center">\n <Button>LeftCenter</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="left-bottom" title="Left Bottom">\n <Button>LeftBottom</Button>\n </Tooltip>\n </div>\n <div className="zent-doc-tooltip-positions-right-col">\n <Tooltip trigger={trigger} position="right-top" title="Right Top">\n <Button>RightTop</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="right-center" title="Right Center">\n <Button>RightCenter</Button>\n </Tooltip>\n <Tooltip trigger={trigger} position="right-bottom" title="Right Bottom">\n <Button>RightBottom</Button>\n </Tooltip>\n </div>\n </div>,\n mountNode\n);'},T.a.createElement(z)),T.a.createElement(L,{title:"Use `centerArrow` to control arrow position",id:"Democenterarrow",src:'import { Tooltip, Button, Input } from \'zent\';\n\nReactDOM.render(\n <div className="zent-doc-tooltip-container">\n <Tooltip centerArrow trigger="hover" position="top-left" title="centerArrow is true">\n <span className="zent-doc-tooltip-tag">Y</span>\n </Tooltip>\n <Tooltip trigger="hover" position="top-left" title="centerArrow is false">\n <span className="zent-doc-tooltip-tag">N</span>\n </Tooltip>\n </div>\n , mountNode\n);'},T.a.createElement(B)),T.a.createElement(L,{title:"Control visiblity from outside",id:"Democontrolled",src:'import { Tooltip, Button } from \'zent\';\n\nclass NoneTriggerDemo extends Component {\n state = {\n visible: false\n };\n\n close = () => {\n this.setState({\n visible: false\n });\n };\n\n open = () => {\n this.setState({\n visible: true\n });\n };\n\n render() {\n const content = (\n <div>\n <p style={{ marginBottom: 10 }}>You can close Tooltip from inside</p>\n <Button type="primary" onClick={this.close}>Close</Button>\n </div>\n );\n return (\n <div className="zent-doc-tooltip-none-trigger-container">\n <Tooltip\n title={content}\n trigger="none"\n visible={this.state.visible}\n >\n <Button type="primary" onClick={this.open}>Open</Button>\n </Tooltip>\n <Button disabled={!this.state.visible} onClick={this.close}>Close from outside</Button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <NoneTriggerDemo />\n , mountNode\n)'},T.a.createElement(N)),T.a.createElement(j,{html:'

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeRequiredDefaultAlternative
titleTooltip contentnodeYes
triggerTrigger methodstringNo\'hover\'\'click\'\n, \n\'hover\'\n, \n\'focus\'
positionTooltip content position, naming rule: content position relative to trigger + arrow position relative to Tooltip. Can be a placement function, see \nPopover.Position.createstring \n|\n funcNo\'top-center\'
centerArrowAlways center arrow to triggerboolNofalse
cushionSame as the \ncushion\n in Popover, which is usually the distance between the edge of the Tooltip and the trigger elementnumberNo10
containerSelectortooltip\'s parent node CSS selectorstringNo\'body\'all legal CSS selector
classNameCustom class namestringNo\'\'
prefixCustom class name prefixstringNo\'zent\'
visibleTooltip switch to controlled mode if this prop is setboolNo
onVisibleChangeMust be used with \nvisiblefuncNo
\n

Extra API to trigger

\n

Tooltip has some additional props depends on different triggers. Like Pop.

\n

Click

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeRequiredDefault
closeOnClickOutsideClose Tooltip when click outside trigger and contentboolNotrue
isOutsideCallback to determine if click is outside of TooltipfuncNo
\n

Hover

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeRequiredDefault
mouseEnterDelayHover open delay(in ms)numberNo200
mouseLeaveDelayHover close delay(in ms)numberNo200
isOutsideCallback to determine if mouse is outside of TooltipfuncNo
quirkSwitch to quirk mode, you don\'t have to move from inside to outside to trigger a close in quirk modeboolNotrue
\n

None

\n

When using this trigger, onConfirm and onCancel will not close Tooltip automatically, you are responsible for controlling visible to close Tooltip.

'}))}}]),a}(b.Component)}}]);