Create And Customize Tooltips And Popovers In React Application Using Bootstrap 4 Example Tutorial

Friends, throughout this tutorial, we will learn to build as well as add tooltips and popovers in React js app using the Bootstrap 4 CSS framework.

The React Bootstrap Package implicit all the Javascript-based components for the Bootstrap 4 Library. We will use it for React Tooltip and Popover example this time.

For crafting the attractive overlays, tooltips and popovers; a fundamental set of components named Overlays is there. They depend on third-party plug-ins such as Popper.Js.

 

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

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

 

How To Build And Add React Tooltips And Popovers With Bootstrap 4 Example

See the below-given steps for learning and implementing the above components in the react app

Step 1- Install New React App

The very step is just to install the new React app. If already done it, then please move onto the next step.

npx create-react-app react-tooltip-popover-demo

 

Now, head over to the project root for proceeding further.

cd react-tooltip-popover-demo

 

It’s time to start the application now.

npm start

 

Step 2- Install The Bootstrap Library In React

Here, we will learn how to install Bootstrap 4 and Bootstrap Plugins in React project. Next, we run the following command in order to simultaneously install react-bootstrap and bootstrap packages.

npm install react-bootstrap bootstrap

 

Step 3- Incorporate Bootstrap Tooltips In React

Now, in this step, we will learn the real thing. We need to add Bootstrap Tooltip In React Js application. Hence, we import the essential services which inject the major services to spruce up Bootstrap Tooltips in React Js project.

Now is required to head over to src/App.js file and import the below-given 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 the library drives the overlays which are primary sources of the Tooltip and Popover mechanism. It is also responsible for the positioning of the elements.

We can apply the Bootstrap styling by using bootstrap.min.cs and we have already imported it in the react template.

 

Step 4- Display Tooltip In React On Click Event

In this step, we learn the effortless way to create 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;

 

Step 5- Bootstrap Popover In React On Hover

It is quite simple and flexible to call Bootstrap Popovers in React. Just simply import the Popover Service and call the Popover through OverlayTrigger.

Hence, add the following code src/App.js file in order to create a simple Popover Tooltip on Hover.

// 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;

Step 6- The Tooltip Position Paradigm

The 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;

 

Summary

So, friends, hope you have learned in this guide all the methods through which we can display Tooltip and Popover in every dimension in React application using the React Bootstrap third-party plugin.

We have used the third-party plugins and that too in quite simple and easy methods.

 

Thanks