Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/41.dcad44fd.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[41],{1130:function(t,e,n){"use strict";n.d(e,"a",(function(){return w}));var o=n(118),i=n(1100),a=n(1109),s=n(1090),c=n(1117),r=n(1119),l=n(5),d=n(0),m=n(1024),p=n(551),u=n(1087),j=n(1099),h=n(11),b=n(370),f=n(371),x=n(1131),O=n.n(x),T=n(1);const v=Object(m.a)({productionPrefix:"iframe-"});class g extends d.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=t=>{this.contentDocument=t?t.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(b.a)({...Object(p.a)(),plugins:[...Object(p.a)().plugins,Object(f.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(T.jsxs)(T.Fragment,{children:[Object(T.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(T.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:t,classes:e,theme:n}=this.props;return Object(T.jsx)(O.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(e.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(T.jsx)(u.b,{jss:this.state.jss,generateClassName:v,sheetsManager:this.state.sheetsManager,children:Object(T.jsx)(j.a,{theme:n,children:Object(d.cloneElement)(t,{container:this.state.container})})}):null})}}var y=Object(h.a)((t=>({root:{backgroundColor:t.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function B(t){const[e,n]=Object(d.useState)(t.currentTabIndex),{component:m,raw:p,iframe:u,className:j}=t;return Object(T.jsxs)(a.a,{className:Object(l.a)(j,"shadow"),children:[Object(T.jsx)(i.a,{position:"static",color:"default",className:"shadow-0",children:Object(T.jsxs)(r.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:e,onChange:function(t,e){n(e)},children:[m&&Object(T.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(T.jsx)(s.a,{children:"remove_red_eye"})}),p&&Object(T.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(T.jsx)(s.a,{children:"code"})})]})}),Object(T.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(T.jsx)("div",{className:0===e?"flex flex-1 max-w-full":"hidden",children:m&&(u?Object(T.jsx)(y,{children:Object(T.jsx)(m,{})}):Object(T.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(T.jsx)(m,{})}))}),Object(T.jsx)("div",{className:1===e?"flex flex-1":"hidden",children:p&&Object(T.jsx)("div",{className:"flex flex-1",children:Object(T.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:p.default})})})]})]})}B.defaultProps={currentTabIndex:0};var w=B},2407:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return u}));n(0);var o=n(1072),i=n(1174),a=n.n(i),s=n(1102),c=n(1190),r=n.n(c),l=n(1028),d=n(1097),m=n(1);const p=Object(o.a)((t=>({fab:{margin:t.spacing(2)},absolute:{position:"absolute",bottom:t.spacing(2),right:t.spacing(3)}})));function u(){const t=p();return Object(m.jsxs)("div",{children:[Object(m.jsx)(d.a,{title:"Delete",children:Object(m.jsx)(l.a,{"aria-label":"delete",children:Object(m.jsx)(r.a,{})})}),Object(m.jsx)(d.a,{title:"Add","aria-label":"add",children:Object(m.jsx)(s.a,{color:"primary",className:t.fab,children:Object(m.jsx)(a.a,{})})}),Object(m.jsx)(d.a,{title:"Add","aria-label":"add",children:Object(m.jsx)(s.a,{color:"secondary",className:t.absolute,children:Object(m.jsx)(a.a,{})})})]})}},2408:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AddIcon from '@material-ui/icons/Add';\nimport Fab from '@material-ui/core/Fab';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst useStyles = makeStyles((theme) => ({\n fab: {\n margin: theme.spacing(2),\n },\n absolute: {\n position: 'absolute',\n bottom: theme.spacing(2),\n right: theme.spacing(3),\n },\n}));\n\nexport default function SimpleTooltips() {\n const classes = useStyles();\n\n return (\n <div>\n <Tooltip title=\"Delete\">\n <IconButton aria-label=\"delete\">\n <DeleteIcon />\n </IconButton>\n </Tooltip>\n <Tooltip title=\"Add\" aria-label=\"add\">\n <Fab color=\"primary\" className={classes.fab}>\n <AddIcon />\n </Fab>\n </Tooltip>\n <Tooltip title=\"Add\" aria-label=\"add\">\n <Fab color=\"secondary\" className={classes.absolute}>\n <AddIcon />\n </Fab>\n </Tooltip>\n </div>\n );\n}\n"},2409:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return l}));n(0);var o=n(1072),i=n(1172),a=n(1098),s=n(1097),c=n(1);const r=Object(o.a)({root:{width:500}});function l(){const t=r();return Object(c.jsxs)("div",{className:t.root,children:[Object(c.jsx)(i.a,{container:!0,justifyContent:"center",children:Object(c.jsxs)(i.a,{item:!0,children:[Object(c.jsx)(s.a,{title:"Add",placement:"top-start",children:Object(c.jsx)(a.a,{children:"top-start"})}),Object(c.jsx)(s.a,{title:"Add",placement:"top",children:Object(c.jsx)(a.a,{children:"top"})}),Object(c.jsx)(s.a,{title:"Add",placement:"top-end",children:Object(c.jsx)(a.a,{children:"top-end"})})]})}),Object(c.jsxs)(i.a,{container:!0,justifyContent:"center",children:[Object(c.jsxs)(i.a,{item:!0,xs:6,children:[Object(c.jsx)(s.a,{title:"Add",placement:"left-start",children:Object(c.jsx)(a.a,{children:"left-start"})}),Object(c.jsx)("br",{}),Object(c.jsx)(s.a,{title:"Add",placement:"left",children:Object(c.jsx)(a.a,{children:"left"})}),Object(c.jsx)("br",{}),Object(c.jsx)(s.a,{title:"Add",placement:"left-end",children:Object(c.jsx)(a.a,{children:"left-end"})})]}),Object(c.jsxs)(i.a,{item:!0,container:!0,xs:6,alignItems:"flex-end",direction:"column",children:[Object(c.jsx)(i.a,{item:!0,children:Object(c.jsx)(s.a,{title:"Add",placement:"right-start",children:Object(c.jsx)(a.a,{children:"right-start"})})}),Object(c.jsx)(i.a,{item:!0,children:Object(c.jsx)(s.a,{title:"Add",placement:"right",children:Object(c.jsx)(a.a,{children:"right"})})}),Object(c.jsx)(i.a,{item:!0,children:Object(c.jsx)(s.a,{title:"Add",placement:"right-end",children:Object(c.jsx)(a.a,{children:"right-end"})})})]})]}),Object(c.jsx)(i.a,{container:!0,justifyContent:"center",children:Object(c.jsxs)(i.a,{item:!0,children:[Object(c.jsx)(s.a,{title:"Add",placement:"bottom-start",children:Object(c.jsx)(a.a,{children:"bottom-start"})}),Object(c.jsx)(s.a,{title:"Add",placement:"bottom",children:Object(c.jsx)(a.a,{children:"bottom"})}),Object(c.jsx)(s.a,{title:"Add",placement:"bottom-end",children:Object(c.jsx)(a.a,{children:"bottom-end"})})]})})]})}},2410:function(t,e,n){"use strict";n.r(e),e.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Grid from \'@material-ui/core/Grid\';\nimport Button from \'@material-ui/core/Button\';\nimport Tooltip from \'@material-ui/core/Tooltip\';\n\nconst useStyles = makeStyles({\n root: {\n width: 500,\n },\n});\n\nexport default function PositionedTooltips() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Grid container justifyContent="center">\n <Grid item>\n <Tooltip title="Add" placement="top-start">\n <Button>top-start</Button>\n </Tooltip>\n <Tooltip title="Add" placement="top">\n <Button>top</Button>\n </Tooltip>\n <Tooltip title="Add" placement="top-end">\n <Button>top-end</Button>\n </Tooltip>\n </Grid>\n </Grid>\n <Grid container justifyContent="center">\n <Grid item xs={6}>\n <Tooltip title="Add" placement="left-start">\n <Button>left-start</Button>\n </Tooltip>\n <br />\n <Tooltip title="Add" placement="left">\n <Button>left</Button>\n </Tooltip>\n <br />\n <Tooltip title="Add" placement="left-end">\n <Button>left-end</Button>\n </Tooltip>\n </Grid>\n <Grid item container xs={6} alignItems="flex-end" direction="column">\n <Grid item>\n <Tooltip title="Add" placement="right-start">\n <Button>right-start</Button>\n </Tooltip>\n </Grid>\n <Grid item>\n <Tooltip title="Add" placement="right">\n <Button>right</Button>\n </Tooltip>\n </Grid>\n <Grid item>\n <Tooltip title="Add" placement="right-end">\n <Button>right-end</Button>\n </Tooltip>\n </Grid>\n </Grid>\n </Grid>\n <Grid container justifyContent="center">\n <Grid item>\n <Tooltip title="Add" placement="bottom-start">\n <Button>bottom-start</Button>\n </Tooltip>\n <Tooltip title="Add" placement="bottom">\n <Button>bottom</Button>\n </Tooltip>\n <Tooltip title="Add" placement="bottom-end">\n <Button>bottom-end</Button>\n </Tooltip>\n </Grid>\n </Grid>\n </div>\n );\n}\n'},2411:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return h}));var o=n(0),i=n.n(o),a=n(11),s=n(1072),c=n(1098),r=n(1097),l=n(194),d=n(1);const m=Object(a.a)((t=>({tooltip:{backgroundColor:t.palette.common.white,color:"rgba(0, 0, 0, 0.87)",boxShadow:t.shadows[1],fontSize:11}})))(r.a),p=Object(s.a)((t=>({arrow:{color:t.palette.common.black},tooltip:{backgroundColor:t.palette.common.black}})));function u(t){const e=p();return Object(d.jsx)(r.a,{arrow:!0,classes:e,...t})}const j=Object(a.a)((t=>({tooltip:{backgroundColor:"#f5f5f9",color:"rgba(0, 0, 0, 0.87)",maxWidth:220,fontSize:t.typography.pxToRem(12),border:"1px solid #dadde9"}})))(r.a);function h(){return Object(d.jsxs)("div",{children:[Object(d.jsx)(m,{title:"Add",children:Object(d.jsx)(c.a,{children:"Light"})}),Object(d.jsx)(u,{title:"Add",children:Object(d.jsx)(c.a,{children:"Bootstrap"})}),Object(d.jsx)(j,{title:Object(d.jsxs)(i.a.Fragment,{children:[Object(d.jsx)(l.a,{color:"inherit",children:"Tooltip with HTML"}),Object(d.jsx)("em",{children:"And here's"})," ",Object(d.jsx)("b",{children:"some"})," ",Object(d.jsx)("u",{children:"amazing content"}),"."," ","It's very engaging. Right?"]}),children:Object(d.jsx)(c.a,{children:"HTML"})})]})}},2412:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\n\nconst LightTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: theme.palette.common.white,\n color: 'rgba(0, 0, 0, 0.87)',\n boxShadow: theme.shadows[1],\n fontSize: 11,\n },\n}))(Tooltip);\n\nconst useStylesBootstrap = makeStyles((theme) => ({\n arrow: {\n color: theme.palette.common.black,\n },\n tooltip: {\n backgroundColor: theme.palette.common.black,\n },\n}));\n\nfunction BootstrapTooltip(props) {\n const classes = useStylesBootstrap();\n\n return <Tooltip arrow classes={classes} {...props} />;\n}\n\nconst HtmlTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: '#f5f5f9',\n color: 'rgba(0, 0, 0, 0.87)',\n maxWidth: 220,\n fontSize: theme.typography.pxToRem(12),\n border: '1px solid #dadde9',\n },\n}))(Tooltip);\n\nexport default function CustomizedTooltips() {\n return (\n <div>\n <LightTooltip title=\"Add\">\n <Button>Light</Button>\n </LightTooltip>\n <BootstrapTooltip title=\"Add\">\n <Button>Bootstrap</Button>\n </BootstrapTooltip>\n <HtmlTooltip\n title={\n <React.Fragment>\n <Typography color=\"inherit\">Tooltip with HTML</Typography>\n <em>{\"And here's\"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}\n {\"It's very engaging. Right?\"}\n </React.Fragment>\n }\n >\n <Button>HTML</Button>\n </HtmlTooltip>\n </div>\n );\n}\n"},2413:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return s}));n(0);var o=n(1098),i=n(1097),a=n(1);function s(){return Object(a.jsx)(i.a,{title:"Add",arrow:!0,children:Object(a.jsx)(o.a,{children:"Arrow"})})}},2414:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nexport default function ArrowTooltips() {\n return (\n <Tooltip title=\"Add\" arrow>\n <Button>Arrow</Button>\n </Tooltip>\n );\n}\n"},2415:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return d}));var o=n(0),i=n.n(o),a=n(1172),s=n(1098),c=n(1097),r=n(1026),l=n(1);function d(){const[t,e]=i.a.useState(!1),n=()=>{e(!1)};return Object(l.jsx)("div",{children:Object(l.jsxs)(a.a,{container:!0,justifyContent:"center",children:[Object(l.jsx)(a.a,{item:!0,children:Object(l.jsx)(c.a,{disableFocusListener:!0,title:"Add",children:Object(l.jsx)(s.a,{children:"Hover or touch"})})}),Object(l.jsx)(a.a,{item:!0,children:Object(l.jsx)(c.a,{disableHoverListener:!0,title:"Add",children:Object(l.jsx)(s.a,{children:"Focus or touch"})})}),Object(l.jsx)(a.a,{item:!0,children:Object(l.jsx)(c.a,{disableFocusListener:!0,disableTouchListener:!0,title:"Add",children:Object(l.jsx)(s.a,{children:"Hover"})})}),Object(l.jsx)(a.a,{item:!0,children:Object(l.jsx)(r.a,{onClickAway:n,children:Object(l.jsx)("div",{children:Object(l.jsx)(c.a,{PopperProps:{disablePortal:!0},onClose:n,open:t,disableFocusListener:!0,disableHoverListener:!0,disableTouchListener:!0,title:"Add",children:Object(l.jsx)(s.a,{onClick:()=>{e(!0)},children:"Click"})})})})})]})})}},2416:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\n\nexport default function TriggersTooltips() {\n const [open, setOpen] = React.useState(false);\n\n const handleTooltipClose = () => {\n setOpen(false);\n };\n\n const handleTooltipOpen = () => {\n setOpen(true);\n };\n\n return (\n <div>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip disableFocusListener title=\"Add\">\n <Button>Hover or touch</Button>\n </Tooltip>\n </Grid>\n <Grid item>\n <Tooltip disableHoverListener title=\"Add\">\n <Button>Focus or touch</Button>\n </Tooltip>\n </Grid>\n <Grid item>\n <Tooltip disableFocusListener disableTouchListener title=\"Add\">\n <Button>Hover</Button>\n </Tooltip>\n </Grid>\n <Grid item>\n <ClickAwayListener onClickAway={handleTooltipClose}>\n <div>\n <Tooltip\n PopperProps={{\n disablePortal: true,\n }}\n onClose={handleTooltipClose}\n open={open}\n disableFocusListener\n disableHoverListener\n disableTouchListener\n title=\"Add\"\n >\n <Button onClick={handleTooltipOpen}>Click</Button>\n </Tooltip>\n </div>\n </ClickAwayListener>\n </Grid>\n </Grid>\n </div>\n );\n}\n"},2417:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return r}));var o=n(0),i=n.n(o),a=n(1098),s=n(1097),c=n(1);function r(){const[t,e]=i.a.useState(!1);return Object(c.jsx)(s.a,{open:t,onClose:()=>{e(!1)},onOpen:()=>{e(!0)},title:"Add",children:Object(c.jsx)(a.a,{children:"Controlled"})})}},2418:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nexport default function ControlledTooltips() {\n const [open, setOpen] = React.useState(false);\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n return (\n <Tooltip open={open} onClose={handleClose} onOpen={handleOpen} title=\"Add\">\n <Button>Controlled</Button>\n </Tooltip>\n );\n}\n"},2419:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return l}));n(0);var o=n(1072),i=n(1098),a=n(1097),s=n(1);const c=Object(o.a)((t=>({button:{margin:t.spacing(1)},customWidth:{maxWidth:500},noMaxWidth:{maxWidth:"none"}}))),r="\nAliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.\nPraesent non nunc mollis, fermentum neque at, semper arcu.\nNullam eget est sed sem iaculis gravida eget vitae justo.\n";function l(){const t=c();return Object(s.jsxs)("div",{children:[Object(s.jsx)(a.a,{title:r,children:Object(s.jsx)(i.a,{className:t.button,children:"Default Width [300px]"})}),Object(s.jsx)(a.a,{title:r,classes:{tooltip:t.customWidth},children:Object(s.jsx)(i.a,{className:t.button,children:"Custom Width [500px]"})}),Object(s.jsx)(a.a,{title:r,classes:{tooltip:t.noMaxWidth},children:Object(s.jsx)(i.a,{className:t.button,children:"No wrapping"})})]})}},2420:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst useStyles = makeStyles((theme) => ({\n button: {\n margin: theme.spacing(1),\n },\n customWidth: {\n maxWidth: 500,\n },\n noMaxWidth: {\n maxWidth: 'none',\n },\n}));\n\nconst longText = `\nAliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.\nPraesent non nunc mollis, fermentum neque at, semper arcu.\nNullam eget est sed sem iaculis gravida eget vitae justo.\n`;\n\nexport default function VariableWidth() {\n const classes = useStyles();\n\n return (\n <div>\n <Tooltip title={longText}>\n <Button className={classes.button}>Default Width [300px]</Button>\n </Tooltip>\n <Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>\n <Button className={classes.button}>Custom Width [500px]</Button>\n </Tooltip>\n <Tooltip title={longText} classes={{ tooltip: classes.noMaxWidth }}>\n <Button className={classes.button}>No wrapping</Button>\n </Tooltip>\n </div>\n );\n}\n"},2421:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return s}));n(0);var o=n(1098),i=n(1097),a=n(1);function s(){return Object(a.jsx)(i.a,{title:"Add",interactive:!0,children:Object(a.jsx)(o.a,{children:"Interactive"})})}},2422:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nexport default function InteractiveTooltips() {\n return (\n <Tooltip title=\"Add\" interactive>\n <Button>Interactive</Button>\n </Tooltip>\n );\n}\n"},2423:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return s}));n(0);var o=n(1098),i=n(1097),a=n(1);function s(){return Object(a.jsx)(i.a,{title:"You don't have permission to do this",children:Object(a.jsx)("span",{children:Object(a.jsx)(o.a,{disabled:!0,children:"A Disabled Button"})})})}},2424:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nexport default function DisabledTooltips() {\n return (\n <Tooltip title=\"You don't have permission to do this\">\n <span>\n <Button disabled>A Disabled Button</Button>\n </span>\n </Tooltip>\n );\n}\n"},2425:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return r}));n(0);var o=n(1098),i=n(1097),a=n(546),s=n(1344),c=n(1);function r(){return Object(c.jsxs)("div",{children:[Object(c.jsx)(i.a,{title:"Add",children:Object(c.jsx)(o.a,{children:"Grow"})}),Object(c.jsx)(i.a,{TransitionComponent:a.a,TransitionProps:{timeout:600},title:"Add",children:Object(c.jsx)(o.a,{children:"Fade"})}),Object(c.jsx)(i.a,{TransitionComponent:s.a,title:"Add",children:Object(c.jsx)(o.a,{children:"Zoom"})})]})}},2426:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Fade from '@material-ui/core/Fade';\nimport Zoom from '@material-ui/core/Zoom';\n\nexport default function TransitionsTooltips() {\n return (\n <div>\n <Tooltip title=\"Add\">\n <Button>Grow</Button>\n </Tooltip>\n <Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title=\"Add\">\n <Button>Fade</Button>\n </Tooltip>\n <Tooltip TransitionComponent={Zoom} title=\"Add\">\n <Button>Zoom</Button>\n </Tooltip>\n </div>\n );\n}\n"},2427:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return s}));n(0);var o=n(1098),i=n(1097),a=n(1);function s(){return Object(a.jsx)(i.a,{title:"Add",enterDelay:500,leaveDelay:200,children:Object(a.jsx)(o.a,{children:"[500ms, 200ms]"})})}},2428:function(t,e,n){"use strict";n.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nexport default function DelayTooltips() {\n return (\n <Tooltip title=\"Add\" enterDelay={500} leaveDelay={200}>\n <Button>[500ms, 200ms]</Button>\n </Tooltip>\n );\n}\n"},2625:function(t,e,n){"use strict";n.r(e);var o=n(1130),i=n(118),a=n(1098),s=n(1090),c=n(194),r=n(1072),l=n(1);const d=Object(r.a)((t=>({layoutRoot:{"& .description":{marginBottom:16}}})));e.default=function(t){return d(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(a.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/tooltips",target:"_blank",role:"button",children:[Object(l.jsx)(s.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(c.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Tooltip"}),Object(l.jsx)(c.a,{className:"description",children:"Tooltips display informative text when users hover over, focus on, or tap an element."}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["When activated, ",Object(l.jsx)("a",{href:"https://material.io/design/components/tooltips.html",children:"Tooltips"})," ","display a text label identifying an element, such as a description of its function."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Tooltips"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2407).default,raw:n(2408)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Positioned Tooltips"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["The ",Object(l.jsx)("code",{children:"Tooltip"})," has 12 ",Object(l.jsx)("strong",{children:"placements"})," choice. They don\u2019t have directional arrows; instead, they rely on motion emanating from the source to convey direction."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2409).default,raw:n(2410)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized tooltips"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["Here are some examples of customizing the component. You can learn more about this in the",Object(l.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2411).default,raw:n(2412)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Arrow Tooltips"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can use the ",Object(l.jsx)("code",{children:"arrow"})," prop to give your tooltip an arrow indicating which element it refers to."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2413).default,raw:n(2414)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Custom child element"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"The tooltip needs to apply DOM event listeners to its child element. If the child is a custom React element, you need to make sure that it spreads its properties to the underlying DOM element."}),Object(l.jsx)(i.a,{component:"pre",className:"language-jsx",children:' \nconst MyComponent = React.forwardRef(function MyComponent(props, ref) {\n // Spread the props to the underlying DOM element.\n return <div {...props} ref={ref}>Bin</div>\n});\n\n// ...\n\n<Tooltip title="Delete">\n <MyComponent>\n</Tooltip>\n'}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can find a similar concept in the"," ",Object(l.jsx)("a",{href:"/guides/composition/#wrapping-components",children:"wrapping components"})," guide."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Triggers"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"You can define the types of events that cause a tooltip to show."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2415).default,raw:n(2416)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Controlled Tooltips"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can use the ",Object(l.jsx)("code",{children:"open"}),", ",Object(l.jsx)("code",{children:"onOpen"})," and ",Object(l.jsx)("code",{children:"onClose"})," properties to control the behavior of the tooltip."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2417).default,raw:n(2418)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Variable Width"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["The ",Object(l.jsx)("code",{children:"Tooltip"})," wraps long text by default to make it readable."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2419).default,raw:n(2420)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Interactive"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["A tooltip can be interactive. It won't close when the user hovers over the tooltip before the ",Object(l.jsx)("code",{children:"leaveDelay"})," is expired."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2421).default,raw:n(2422)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Disabled Elements"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["By default disabled elements like ",Object(l.jsx)("code",{children:"<button>"})," do not trigger user interactions so a ",Object(l.jsx)("code",{children:"Tooltip"})," will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element, such as a ",Object(l.jsx)("code",{children:"span"}),"."]}),Object(l.jsx)("blockquote",{children:Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"\u26a0\ufe0f In order to work with Safari, you need at least one display block or flex item below the tooltip wrapper."})}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2423).default,raw:n(2424)})}),Object(l.jsx)("blockquote",{children:Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["If you're not wrapping a Material-UI component that inherits from"," ",Object(l.jsx)("code",{children:"ButtonBase"}),", for instance, a native ",Object(l.jsx)("code",{children:"<button>"})," element, you should also add the CSS property ",Object(l.jsx)("em",{children:"pointer-events: none;"})," to your element when disabled:"]})}),Object(l.jsx)(i.a,{component:"pre",className:"language-jsx",children:' \n<Tooltip title="You don\'t have permission to do this">\n <span>\n <button disabled={disabled} style={disabled ? { pointerEvents: "none" } : {}}>\n {\'A disabled button\'}\n </button>\n </span>\n</Tooltip>\n'}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Transitions"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Use a different transition."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2425).default,raw:n(2426)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Showing and hiding"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties ",Object(l.jsx)("code",{children:"enterDelay"})," and"," ",Object(l.jsx)("code",{children:"leaveDelay"}),", as shown in the Controlled Tooltips demo above."]}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the ",Object(l.jsx)("code",{children:"disableTouchListener"})," ","property."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2427).default,raw:n(2428)})})]})}}}]);
Mini Shell