text: (window.webpackJsonp=window.webpackJsonp||[]).push([[29],{"/02+":function(e,t){e.exports='const Link = ({ id, children, title }) => (\n  <OverlayTrigger overlay={<Tooltip id={id}>{title}</Tooltip>}>\n    <a href="#">{children}</a>\n  </OverlayTrigger>\n);\n\nrender(\n  <p>\n    Tight pants next level keffiyeh{\' \'}\n    <Link title="Default title" id="t-1">\n      you probably\n    </Link>{\' \'}\n    haven\'t heard of them. Farm-to-table seitan, mcsweeney\'s fixie sustainable\n    quinoa 8-bit american apparel{\' \'}\n    <Link id="t-2" title="Another one">\n      have a\n    </Link>{\' \'}\n    terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo\n    thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney\'s\n    cleanse vegan chambray. A really ironic artisan{\' \'}\n    <Link title="Another one here too" id="t-3">\n      whatever keytar\n    </Link>\n    , scenester farm-to-table banksy Austin{\' \'}\n    <Link title="The last tip!" id="t-4">\n      twitter handle\n    </Link>{\' \'}\n    freegan cred raw denim single-origin coffee viral.\n  </p>,\n);\n'},"/xTU":function(e,t){e.exports="<>\n  {['top', 'right', 'bottom', 'left'].map((placement) => (\n    <OverlayTrigger\n      key={placement}\n      placement={placement}\n      overlay={\n        <Tooltip id={`tooltip-${placement}`}>\n          Tooltip on <strong>{placement}</strong>.\n        </Tooltip>\n      }\n    >\n      <Button variant=\"secondary\">Tooltip on {placement}</Button>\n    </OverlayTrigger>\n  ))}\n</>;\n"},"2SAL":function(e,t){e.exports='function Example() {\n  const [show, setShow] = useState(false);\n  const [target, setTarget] = useState(null);\n  const ref = useRef(null);\n\n  const handleClick = (event) => {\n    setShow(!show);\n    setTarget(event.target);\n  };\n\n  return (\n    <div ref={ref}>\n      <Button onClick={handleClick}>Holy guacamole!</Button>\n\n      <Overlay\n        show={show}\n        target={target}\n        placement="bottom"\n        container={ref.current}\n        containerPadding={20}\n      >\n        <Popover id="popover-contained">\n          <Popover.Header as="h3">Popover bottom</Popover.Header>\n          <Popover.Body>\n            <strong>Holy guacamole!</strong> Check this info.\n          </Popover.Body>\n        </Popover>\n      </Overlay>\n    </div>\n  );\n}\n\nrender(<Example />);\n'},"5Pna":function(e,t){e.exports="<>\n  {['top', 'right', 'bottom', 'left'].map((placement) => (\n    <OverlayTrigger\n      trigger=\"click\"\n      key={placement}\n      placement={placement}\n      overlay={\n        <Popover id={`popover-positioned-${placement}`}>\n          <Popover.Header as=\"h3\">{`Popover ${placement}`}</Popover.Header>\n          <Popover.Body>\n            <strong>Holy guacamole!</strong> Check this info.\n          </Popover.Body>\n        </Popover>\n      }\n    >\n      <Button variant=\"secondary\">Popover on {placement}</Button>\n    </OverlayTrigger>\n  ))}\n</>;\n"},BZ6w:function(e,t){e.exports='const popover = (\n  <Popover id="popover-basic">\n    <Popover.Header as="h3">Popover right</Popover.Header>\n    <Popover.Body>\n      And here\'s some <strong>amazing</strong> content. It\'s very engaging.\n      right?\n    </Popover.Body>\n  </Popover>\n);\n\nconst Example = () => (\n  <OverlayTrigger trigger="click" placement="right" overlay={popover}>\n    <Button variant="success">Click me to see</Button>\n  </OverlayTrigger>\n);\n\nrender(<Example />);\n'},J0j7:function(e,t,n){"use strict";n.r(t);var o=n("oYCi"),r=n("+xvc"),a=n("vXRK"),i=n("1u5/"),s=n("h55t"),l=n("afGt"),c=n.n(l),d=n("oGE0"),p=n.n(d),h=n("lQ6g"),j=n.n(h),u=n("RCzV"),g=n.n(u),v=n("BZ6w"),b=n.n(v),m=n("2SAL"),O=n.n(m),y=n("5Pna"),x=n.n(y),f=n("trmH"),w=n.n(f),T=n("/02+"),P=n.n(T),k=n("O0ME"),C=n.n(k),B=n("/xTU"),E=n.n(B),S=n("r+yI"),H=n("Q+lg");t.default=Object(S.a)((function(e){var t=e.data;return Object(o.jsxs)(o.Fragment,{children:[Object(o.jsx)(r.default,{h:"1",id:"overlays",children:"Overlays"}),Object(o.jsx)("p",{className:"lead",children:"A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need."}),Object(o.jsx)(r.default,{h:"2",id:"overlays-overview",children:"Overview"}),Object(o.jsx)("p",{children:"Things to know about the React-Boostrap Overlay components."}),Object(o.jsxs)("ul",{children:[Object(o.jsxs)("li",{children:["Overlays rely on the third-party library"," ",Object(o.jsx)("a",{href:"https://popper.js.org/",children:"Popper.js"}),". It's included automatically with React-Bootstrap, but you should reference the API for more advanced use cases."]}),Object(o.jsxs)("li",{children:["The ",Object(o.jsx)("code",{children:"<Tooltip>"})," and ",Object(o.jsx)("code",{children:"<Popover>"})," ","components do not position themselves. Instead the"," ",Object(o.jsx)("code",{children:"<Overlay>"})," (or ",Object(o.jsx)("code",{children:"<OverlayTrigger>"}),") components, inject ",Object(o.jsx)("code",{children:"ref"})," and ",Object(o.jsx)("code",{children:"style"})," props."]}),Object(o.jsxs)("li",{children:["Tooltip expects specific props injected by the"," ",Object(o.jsx)("code",{children:"<Overlay>"})," component"]}),Object(o.jsxs)("li",{children:["Tooltips for ",Object(o.jsx)("code",{children:"disabled"})," elements must be triggered on a wrapper element."]})]}),Object(o.jsx)(r.default,{h:"2",id:"overlays",children:"Overlay"}),Object(o.jsxs)("p",{children:[Object(o.jsx)("code",{children:"Overlay"})," is the fundamental component for positioning and controlling tooltip visibility. It's a wrapper around Popper.js, that adds support for transitions, and visibility toggling."]}),Object(o.jsx)(r.default,{h:"3",id:"creating-an-overlay",children:"Creating an Overlay"}),Object(o.jsxs)("p",{children:['Overlays consist of at least two elements, the "overlay", the element to be positioned, as well as a "target", the element the overlay is positioned in relation to. You can also also have an "arrow" element, like the tooltips and popovers, but that is optional. Be sure to'," ",Object(o.jsxs)("strong",{children:["check out the ",Object(o.jsx)("a",{href:"https://popper.js.org/docs/v2/",children:"Popper"})," ","documentation for more details about the injected props."]})]}),Object(o.jsx)(i.a,{codeText:p.a}),Object(o.jsx)(r.default,{h:"2",id:"overlay-trigger",children:"OverlayTrigger"}),Object(o.jsxs)("p",{children:["Since the above pattern is pretty common, but verbose, we've included"," ",Object(o.jsx)("code",{children:"<OverlayTrigger>"}),' component to help with common use-cases. It even has functionality to delayed show or hides, and a few different "trigger" events you can mix and match.']}),Object(o.jsxs)("p",{children:["Note that triggering components"," ",Object(o.jsxs)("strong",{children:["must be able to accept"," ",Object(o.jsx)("a",{href:"https://reactjs.org/docs/refs-and-the-dom.html",children:"a ref"})]})," ","since ",Object(o.jsx)("code",{children:"<OverlayTrigger>"})," will attempt to add one. You can use"," ",Object(o.jsx)("a",{href:"https://reactjs.org/docs/react-api.html#reactforwardref",children:"forwardRef()"})," ","for function components."]}),Object(o.jsx)(i.a,{codeText:j.a}),Object(o.jsx)(r.default,{h:"3",id:"customizing-trigger-behavior",children:"Customizing trigger behavior"}),Object(o.jsxs)("p",{children:["For more advanced behaviors ",Object(o.jsx)("code",{children:"<OverlayTrigger>"})," accepts a function child that passes in the injected ",Object(o.jsx)("code",{children:"ref"})," and event handlers that correspond to the configured ",Object(o.jsx)("code",{children:"trigger"})," prop."]}),Object(o.jsx)("p",{children:"You can manually apply the props to any element you want or split them up. The example below shows how to position the overlay to a different element than the one that triggers its visibility."}),Object(o.jsxs)(s.a,{children:[Object(o.jsx)("strong",{children:"Pro Tip:"})," Using the function form of OverlayTrigger avoids a ",Object(o.jsx)("code",{children:"React.findDOMNode"})," call, for those trying to be strict mode compliant."]}),Object(o.jsx)(i.a,{codeText:g.a}),Object(o.jsx)(r.default,{h:"2",id:"tooltips",children:"Tooltips"}),Object(o.jsxs)("p",{className:"lead",children:["A tooltip component for a more stylish alternative to that anchor tag"," ",Object(o.jsx)("code",{children:"title"})," attribute."]}),Object(o.jsx)(r.default,{h:"3",id:"tooltip-examples",children:"Examples"}),Object(o.jsx)("p",{children:"Hover over the links below to see tooltips."}),Object(o.jsx)(i.a,{codeText:P.a,showCode:!1}),Object(o.jsxs)("p",{children:["You can pass the ",Object(o.jsx)("code",{children:"Overlay"})," injected props directly to the Tooltip component."]}),Object(o.jsx)(i.a,{codeText:C.a}),Object(o.jsxs)("p",{children:["Or pass a Tooltip element to ",Object(o.jsx)("code",{children:"OverlayTrigger"})," instead."]}),Object(o.jsx)(i.a,{codeText:E.a}),Object(o.jsx)(r.default,{h:"2",id:"popovers",children:"Popovers"}),Object(o.jsx)("p",{className:"lead",children:"A popover component, like those found in iOS."}),Object(o.jsx)(r.default,{h:"3",id:"popover-examples",children:"Examples"}),Object(o.jsx)(i.a,{codeText:b.a}),Object(o.jsxs)("p",{children:["As with ",Object(o.jsx)("code",{children:"<Tooltip>"}),"s, you can control the placement of the Popover."]}),Object(o.jsx)(i.a,{codeText:x.a}),Object(o.jsx)(r.default,{h:"2",id:"overlays-disabled",children:"Disabled elements"}),Object(o.jsxs)("p",{children:["Elements with the ",Object(o.jsx)("code",{children:"disabled"})," attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the overlay from a wrapper ",Object(o.jsx)("code",{children:"<div>"})," or ",Object(o.jsx)("code",{children:"<span>"})," and override the ",Object(o.jsx)("code",{children:"pointer-events"})," on the disabled element."]}),Object(o.jsx)(i.a,{codeText:c.a}),Object(o.jsx)(r.default,{h:"2",id:"overlays-container",children:"Changing containers"}),Object(o.jsxs)("p",{children:["You can specify a ",Object(o.jsx)("code",{children:"container"})," to control the DOM element the overlay is appended to. This is especially useful when styles conflict with your Overlay's."]}),Object(o.jsx)(i.a,{codeText:O.a,exampleClassName:H.contained}),Object(o.jsx)(r.default,{h:"2",id:"overlays-dynamic-updates",children:"Updating position dynamically"}),Object(o.jsx)("p",{children:"Since we can't know every time your overlay changes size, to reposition it, you need to take manual action if you want to update the position of an Overlay in response to a change."}),Object(o.jsxs)("p",{children:["For this, the Overlay component also injects a a ",Object(o.jsx)("code",{children:"popper"})," ","prop with a ",Object(o.jsx)("code",{children:"scheduleUpdate()"})," method that an overlay component can use to reposition itself."]}),Object(o.jsx)(i.a,{codeText:w.a}),Object(o.jsx)(r.default,{h:"2",id:"overlays-api",children:"API"}),Object(o.jsx)(a.a,{metadata:t.Overlay}),Object(o.jsx)(a.a,{metadata:t.OverlayTrigger}),Object(o.jsx)(a.a,{metadata:t.Tooltip}),Object(o.jsx)(a.a,{metadata:t.Popover}),Object(o.jsx)(a.a,{metadata:t.PopoverBody}),Object(o.jsx)(a.a,{metadata:t.PopoverHeader})]})}))},O0ME:function(e,t){e.exports='function Example() {\n  const [show, setShow] = useState(false);\n  const target = useRef(null);\n\n  return (\n    <>\n      <Button ref={target} onClick={() => setShow(!show)}>\n        Click me!\n      </Button>\n      <Overlay target={target.current} show={show} placement="right">\n        {(props) => (\n          <Tooltip id="overlay-example" {...props}>\n            My Tooltip\n          </Tooltip>\n        )}\n      </Overlay>\n    </>\n  );\n}\n\nrender(<Example />);\n'},"Q+lg":function(e,t,n){e.exports={contained:"overlays-styles-module--contained--3agtF"}},Q6D8:function(e,t,n){e.exports={callout:"Callout-styles-module--callout--1_K3h",warning:"Callout-styles-module--warning--39Zw- Callout-styles-module--callout--1_K3h",danger:"Callout-styles-module--danger--19388 Callout-styles-module--callout--1_K3h"}},RCzV:function(e,t){e.exports='render(\n  <OverlayTrigger\n    placement="bottom"\n    overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>}\n  >\n    {({ ref, ...triggerHandler }) => (\n      <Button\n        variant="light"\n        {...triggerHandler}\n        className="d-inline-flex align-items-center"\n      >\n        <Image\n          ref={ref}\n          roundedCircle\n          src="holder.js/20x20?text=J&bg=28a745&fg=FFF"\n        />\n        <span className="ms-1">Hover to see</span>\n      </Button>\n    )}\n  </OverlayTrigger>,\n);\n'},afGt:function(e,t){e.exports='<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Tooltip!</Tooltip>}>\n  <span className="d-inline-block">\n    <Button disabled style={{ pointerEvents: \'none\' }}>\n      Disabled button\n    </Button>\n  </span>\n</OverlayTrigger>;\n'},h55t:function(e,t,n){"use strict";var o=n("oYCi"),r=n("Q6D8");t.a=function(e){var t=e.title,n=e.children,a=e.theme;return Object(o.jsxs)("aside",{role:"note",className:r[a||"warning"],children:[t&&Object(o.jsx)("header",{className:"h5",children:t}),Object(o.jsx)("div",{children:n})]})}},lQ6g:function(e,t){e.exports='const renderTooltip = (props) => (\n  <Tooltip id="button-tooltip" {...props}>\n    Simple tooltip\n  </Tooltip>\n);\n\nrender(\n  <OverlayTrigger\n    placement="right"\n    delay={{ show: 250, hide: 400 }}\n    overlay={renderTooltip}\n  >\n    <Button variant="success">Hover me to see</Button>\n  </OverlayTrigger>,\n);\n'},oGE0:function(e,t){e.exports="function Example() {\n  const [show, setShow] = useState(false);\n  const target = useRef(null);\n\n  return (\n    <>\n      <Button variant=\"danger\" ref={target} onClick={() => setShow(!show)}>\n        Click me to see\n      </Button>\n      <Overlay target={target.current} show={show} placement=\"right\">\n        {({ placement, arrowProps, show: _show, popper, ...props }) => (\n          <div\n            {...props}\n            style={{\n              backgroundColor: 'rgba(255, 100, 100, 0.85)',\n              padding: '2px 10px',\n              color: 'white',\n              borderRadius: 3,\n              ...props.style,\n            }}\n          >\n            Simple tooltip\n          </div>\n        )}\n      </Overlay>\n    </>\n  );\n}\n\nrender(<Example />);\n"},"r+yI":function(e,t,n){"use strict";n.d(t,"a",(function(){return c}));var o=n("rePB"),r=n("oYCi"),a=n("Snbm"),i=n("aArQ");function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){Object(o.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e){return function(t){var n=t.location.pathname,o=i.a;return(n.startsWith("/getting-started")||n.startsWith("/layout")||n.startsWith("/components")||n.startsWith("/utilities"))&&(o=a.a),Object(r.jsx)(o,{location:t.location,children:Object(r.jsx)(e,l({},t))})}}},trmH:function(e,t){e.exports="const UpdatingPopover = React.forwardRef(\n  ({ popper, children, show: _, ...props }, ref) => {\n    useEffect(() => {\n      console.log('updating!');\n      popper.scheduleUpdate();\n    }, [children, popper]);\n\n    return (\n      <Popover ref={ref} body {...props}>\n        {children}\n      </Popover>\n    );\n  },\n);\n\nconst longContent = `\n  Very long\n  Multiline content\n  that is engaging and what-not\n`;\nconst shortContent = 'Short and sweet!';\n\nfunction Example() {\n  const [content, setContent] = useState(shortContent);\n\n  useEffect(() => {\n    const timerId = setInterval(() => {\n      setContent(content === shortContent ? longContent : shortContent);\n    }, 3000);\n\n    return () => clearInterval(timerId);\n  });\n\n  return (\n    <OverlayTrigger\n      trigger=\"click\"\n      overlay={\n        <UpdatingPopover id=\"popover-contained\">{content}</UpdatingPopover>\n      }\n    >\n      <Button>Holy guacamole!</Button>\n    </OverlayTrigger>\n  );\n}\n\nrender(<Example />);\n"}}]);
  //# sourceMappingURL=component---src-pages-components-overlays-js-6d16f5de0369bc27778c.js.map