React Bootstrap Popovers Tutorial

Hello Devs,

In this tutorial, we are going to learn how to work react bootstrap popovers example.

Follow this step by step guide given below:

Install react-bootstrap

npm install react-bootstrap bootstrap

Shoot this command:

import 'bootstrap/dist/css/bootstrap.css';

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
   
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

Bootstrap Tabs Code

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
   
function App() {
  const popoverRight = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover Right</Popover.Title>
      <Popover.Content>
        This is simple popover example right side.
      </Popover.Content>
    </Popover>
  ); 
   
  const popoverTop = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover Top</Popover.Title>
      <Popover.Content>
        This is simple popover example top side.
      </Popover.Content>
    </Popover>
  );
   
  return (
    <div className="container">
        <h1>React Bootstrap Popovers Example - Rathorji.in</h1>
   
        <OverlayTrigger trigger="click" placement="right" overlay={popoverRight}>
          <Button variant="success">Right - Click Me!</Button>
        </OverlayTrigger>
   
        <OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
          <Button variant="success">Top - Click Me!</Button>
        </OverlayTrigger>
  
    </div>
  );
}
   
export default App;

Run this command:

npm start

I hope this example helps you.