Date:

Share:

How to set react-bootstrap popover position

Related Articles

The Popover plugin is similar to tooltips. This is a pop-up window that appears when the user clicks on an element. The difference is that the pop-up can contain more content.

The difference between Popover vs. Tooltip

Tool explanation is usually enabled when you hover over an element, while a pop-over is enabled by click. In addition, tooltips offer short and accurate information about an element to help the user understand what the element means. Pop-ups.

Set the pop-up location (right) using the location property

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
function App() 
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );

  return (
    <div className="App">
      <OverlayTrigger trigger="click" placement="right" overlay=popover>
        <Button variant="success">Click me to see</Button>
      </OverlayTrigger>
    </div>
  );


export default App;

Set the pop-up location (left) using the location property

Move in to the left inside the positioning backrest to place the pop-up on the left.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
function App() 
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content
        again
      </Popover.Content>
    </Popover>
  );

  return (
    <div className="App">
      <div className="d-flex align-items-center justify-content-center">
        <OverlayTrigger trigger="click" placement="left" overlay=popover>
          <Button variant="success">Click me to see</Button>
        </OverlayTrigger>
      </div>
    </div>
  );


export default App;

Set the pop-up location (below) using the location property

Move to the bottom inside the positioning backrest to place the pop-up at the bottom of the button.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
function App() 
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content
        again
      </Popover.Content>
    </Popover>
  );

  return (
    <div className="App">
      <div className="d-flex align-items-center justify-content-center">
        <OverlayTrigger trigger="click" placement="bottom" overlay=popover>
          <Button variant="success">Click me to see</Button>
        </OverlayTrigger>
      </div>
    </div>
  );


export default App;

Set the pop-up location (above) using the location property

Move the top inside the positioning backrest to place the pop-over at the top of the button.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
function App() 
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content
        again
      </Popover.Content>
    </Popover>
  );

  return (
    <div className="App">
      <div className="d-flex align-items-center justify-content-center" style=height: '350px'>
        <OverlayTrigger trigger="click" placement="top" overlay=popover>
          <Button variant="success">Click me to see</Button>
        </OverlayTrigger>
      </div>
    </div>
  );


export default App;

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles