If you want to manually close OverlayTrigger using React Bootstrap? I solved this problem with the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import React from "react"; import ReactDOM from "react-dom"; import { Container, Popover, OverlayTrigger, Button, Row, Col } from "react-bootstrap"; // Styles import "bootstrap/dist/css/bootstrap.css"; const PopoverCustom = () => { let ref = React.useRef(null); const popover = ( <Popover id="popover-basic"> {/* <Popover.Title as="h3">Popover right</Popover.Title> */} <Popover.Content> And here's some <strong>amazing</strong> content. It's very engaging. right? <div className="mt-3 mb-1"> <Button onClick={() => ref.handleHide()} size="sm" variant="outline-dark" className="pt-0 pb-0" > Hide Popover </Button> </div> </Popover.Content> </Popover> ); return ( <OverlayTrigger ref={r => (ref = r)} container={ref.current} trigger="click" placement="auto" overlay={popover} rootClose > <Button variant="dark">Show popover</Button> </OverlayTrigger> ); }; function App() { return ( <Container className="ml-5 mt-5"> <Row> <Col className="offset-sm-2" sm={8}> <PopoverCustom /> </Col> </Row> </Container> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
