(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;o¶Tooltip\n\n
\nHTML title
,no more operation¶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\nProperty \nDescription \nType \nRequired \nDefault \nAlternative \n\n \ntitle \nTooltip content \n \nnode
Yes \n\n \n \n \ntrigger \nTrigger method \nstring \nNo \n \n\'hover\'
\n\'click\'
\n, \n\'hover\'
\n, \n\'focus\'
\n \nposition \nTooltip content position, naming rule: content position relative to trigger + arrow position relative to Tooltip. Can be a placement function, see \n \nPopover.Position.create
string \n|\n func \nNo \n \n\'top-center\'
\n \n \ncenterArrow \nAlways center arrow to trigger \nbool \nNo \n \nfalse
\n \n \ncushion \nSame as the \n \ncushion
\n in Popover, which is usually the distance between the edge of the Tooltip and the trigger elementnumber \nNo \n \n10
\n \n \ncontainerSelector \ntooltip\'s parent node CSS selector \nstring \nNo \n \n\'body\'
all legal CSS selector \n\n \nclassName \nCustom class name \nstring \nNo \n \n\'\'
\n \n \nprefix \nCustom class name prefix \nstring \nNo \n \n\'zent\'
\n \n \nvisible \nTooltip switch to controlled mode if this prop is set \nbool \nNo \n\n \n \n \n\nonVisibleChange \nMust be used with \n \nvisible
func \nNo \n\n \n ¶Extra API to trigger
\n
Tooltip
has some additional props depends on different triggers. Like Pop
.
Property | \nDescription | \nType | \nRequired | \nDefault | \n
---|---|---|---|---|
closeOnClickOutside | \nClose Tooltip when click outside trigger and content | \nbool | \nNo | \ntrue | \n
isOutside | \nCallback to determine if click is outside of Tooltip | \nfunc | \nNo | \n\n |
Property | \nDescription | \nType | \nRequired | \nDefault | \n
---|---|---|---|---|
mouseEnterDelay | \nHover open delay(in ms) | \nnumber | \nNo | \n200 | \n
mouseLeaveDelay | \nHover close delay(in ms) | \nnumber | \nNo | \n200 | \n
isOutside | \nCallback to determine if mouse is outside of Tooltip | \nfunc | \nNo | \n\n |
quirk | \nSwitch to quirk mode, you don\'t have to move from inside to outside to trigger a close in quirk mode | \nbool | \nNo | \ntrue | \n
When using this trigger, onConfirm
and onCancel
will not close Tooltip
automatically, you are responsible for controlling visible
to close Tooltip
.