React 18 Tooltips & Popovers with Bootstrap 5 Examples

Last Updated on March 4, 2024 by Digamber in React JS

In this React 16 tutorial, we are going to ascertain how to build and add Tooltips and Popovers in React.js application using the Bootstrap CSS framework.

The React Bootstrap package implied all the JavaScript-based components for the Bootstrap library, and we are using it for the React Tooltip and Popover example.

Overlays are the fundamental set of components to craft the eye-catching overlays, tooltips and popovers; they depend on third-party plugins such as Popper.js.

A tooltip component is a quintessential way of replacing anchor tag title attribute.

Generically, the Popover is almost similar to tooltips; it is a simple pop-up box that manifests when a user clicks on an element. The only difference is that the Popover contains much more content than a tooltip.

Install New React App

Before we go any further, I want to tell you something straight install the new React application. If already installed, then skip it.

npx create-react-app react-tooltip-popover-example

Before i jump into the details, please head over to the project root.

cd react-tooltip-popover-example

Start the application:

npm start

Install Bootstrap Library in React

Bear with me, i am going to show you how to install the Bootstrap and React Bootstrap plugins in React project.

Run the following command to simultaneously install react-bootstrap and Bootstrap packages.

npm install react-bootstrap bootstrap --legacy-peer-deps

It doesn’t stop here, let’s jump onto next step.

Incorporate Bootstrap Tooltips in React

Here is the real kicker, now we need to add Bootstrap tooltip in React js application.

So, import the essential services which inject the major services to spruce up Bootstrap Tooltips in React Js project.

Head over to src/App.js file and import the following services.

import { OverlayTrigger, Overlay, Tooltip, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

The react-bootstrap library automatically installs popper.js, and this library drives the overlays, which are the primary sources of Tooltips and Popovers mechanism, even responsible for the positioning of the elements.

The bootstrap styling can be applied using the bootstrap.min.css, and we have already imported it in react template.

Display Tooltip in React on Click Event

Let’s ascertain the facile way of creating the simple Tooltip and call it on click event using Overlay, Tooltip and Button services.

// App.js

import React, { useRef, useState } from 'react';
import './App.css';

import { Overlay, Tooltip, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {

  const [show, setShow] = useState(false);
  const target = useRef(null);

  return (
    <div>
      <Button variant="danger" ref={target} onClick={() => setShow(!show)}>
        Click on me
      </Button>
      <Overlay target={target.current} show={show} placement="bottom">
        {(props) => (
          <Tooltip  {...props}>
            The quick brown fox jumps over the lazy dog!
          </Tooltip>
        )}
      </Overlay>
    </div >
  );
}

export default App;

Bootstrap Popover in React on Hover

It is effortless and flexible to call Bootstrap Popovers in React, just import the Popover service and call the Poover through OverlayTrigger.

We will see how to crate a simple Popover Tooltip on hover using Bootstrap, so add the following code in src/App.js file.

Hopefully you have understood me so far.

// App.js

import React from 'react';
import './App.css';

import { OverlayTrigger, Popover, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {

  const popover = (
    <Popover>
      <Popover.Title as="h3">Popover Top</Popover.Title>
      <Popover.Content>
          The quick brown fox jumps over the lazy dog!
      </Popover.Content>
    </Popover>
  );

  return (
      <OverlayTrigger 
         trigger="hover" 
         placement="top" 
         overlay={popover}
         >
        <Button variant="danger">Hover over me</Button>
      </OverlayTrigger>
  );
}

export default App;

The Tooltip Position Paradigm

Placement of Tooltip can be set in four dimensions bypassing the Bottom, Top, Left and Right properties in OverlayTrigger directive.

// App.js

import React, { useRef, useState } from 'react';
import './App.css';

import { OverlayTrigger, Overlay, Tooltip, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {

  return (
    <div>

      <OverlayTrigger
          placement={'bottom'}
          overlay={
            <Tooltip>
              Tooltip Bottom
            </Tooltip>
          }
        >
        <Button variant="danger">Bottom</Button>
      </OverlayTrigger>

      <OverlayTrigger
          placement={'top'}
          overlay={
            <Tooltip>
              Tooltip Top
            </Tooltip>
          }
        >
        <Button variant="danger">Top</Button>
      </OverlayTrigger>

      <OverlayTrigger
          placement={'left'}
          overlay={
            <Tooltip>
              Tooltip Left
            </Tooltip>
          }
        >
        <Button variant="danger">Left</Button>
      </OverlayTrigger>

      <OverlayTrigger
          placement={'right'}
          overlay={
            <Tooltip>
              Tooltip Right
            </Tooltip>
          }
        >
        <Button variant="danger">Right</Button>
      </OverlayTrigger>

    </div>
  );
}

export default App;

The Bottom Line

Eventually, we have seen all the methods through which we can display Tooltip and Popover in every dimension in React application using the React Bootstrap third-party plugin.

To impetus the development process, we must use the third party plugin and thats what we did, we have implied the exorbitantly easy methods in this tutorial.

I hope you will like this tutorial and share it with others. To play more with Tooltips and Popovers, please check the documentation here.