React tooltip and popover tutorial; This guide will show you how to take pragmatic approach to implement overlay popover and tooltip in React js application using notable React Bootstrap library.

The tooltip is the primary graphical user interface element, a small box containing some message or information. It mainly surfaces when users hover over certain user-interface elements ( icon, image, hyperlink, or another GUI element).

Tooltip stays stagnant as long as the cursor is positioned over the ui element; we will show how to implement tooltip in react app using the react-bootstrap package.

Popover are the more advanced version of the tooltip. Apparently, the tooltip and popover look almost identical; unlike the tooltip, you can customize the popover more easily based on your needs.

You can add more information in popovers using the custom HTML and display it to users. React bootstrap doesn’t lack features; rather, it offers tons of customization properties. For example, you can change the popover’s position and set various event handlers (click, focus, hover) to manage the overlay popovers.

React Bootstrap Tooltip and Popover Customization Example

• Step 1: Download React Project
• Step 2: Add React Bootstrap Library in React
• Step 3: Import React Bootstrap Packages
• Step 4: React Bootstrap Tooltip Example
• Step 5: Change Tooltip Position
• Step 6: Implement Bootstrap Popover in React
• Step 7: Start React Application

Download React Project

Move to the command prompt, type the provided command to install the new react application. If you are not new to react development, then you probably aware of this process you can ignore this step.

npx create-react-app react-demo

Add React Bootstrap Library in React

After installing the application, make sure to step into the react project using the cd your-project-name command. After that, use the following command to install bootstrap and react-bootstrap libraries in the react app.

npm install react-bootstrap bootstrap

Import React Bootstrap Tooltips, Overlay Packages

React Bootstrap is accessible only after importing its component’s packages; you have to add Tooltip, Overlay, OverlayTrigger, and Button modules to create tooltip and popover.

Update code in src/App.js file.

import React from 'react';

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

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

React Bootstrap Tooltip Example

The easy way to build a tooltip is by using the overlay component, use react-bootstrap tooltip packages to form the tooltip, you can add the onClick event handler to call the displayTooltip() method on click.

import React, { useRef, useState } from 'react';

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

function App() {

  const [tooltip, displayTooltip] = useState(false);
  const elementTarget = useRef(null);

  return (
    <div className="App mt-5">
      <Button ref={elementTarget} onClick={() => displayTooltip(!tooltip)} variant="primary" >
        Show Tooltip
      </Button>

      <Overlay elementTarget={elementTarget.current} show={tooltip} placement="top">
        {(props) => (
          <Tooltip  {...props}>
            Lorem Ipsum is simply dummy text of the printing industry.
          </Tooltip>
        )}
      </Overlay>
    </div >
  );
}

export default App;

Switch Tooltip Position

To change the tooltip position, define the OverlayTrigger followed by placement property. It offers four types of position properties such as top, bottom, left, and right for displaying the tooltip.

import React from 'react';

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

function App() {
  return (
    <div className="App mt-5">

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

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

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

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

    </div >
  );
}

export default App;

Implement Bootstrap Popover in React

Implementing popover in react requires importing OverlayTrigger, Popover, and a button; overlay also allows adding HTML content. We also defined the dynamic overlay popover positions to show you the brief idea of how easy it is to customize the popovers.

import React from 'react';

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

function App() {
  return (
    <div className="App mt-5">
        <>
          {['top', 'right', 'bottom', 'left'].map((placement) => (
            <OverlayTrigger
              trigger="hover"
              key={placement}
              placement={placement}
              overlay={
                <Popover id={`popover-positioned-${placement}`}>
                  <Popover.Title as="h3">{`Popover ${placement}`}</Popover.Title>
                  <Popover.Content>
                    <strong>Lorem Ipsum</strong> is simply dummy text of the printing industry.
                  </Popover.Content>
                </Popover>
              }>
              <Button variant="secondary">{placement} Popover</Button>
            </OverlayTrigger>
          ))}
        </>
    </div>
  );
}

export default App;

Start React Application

Next, run the following command to start the react application server, use the displayed url on the terminal to test the tooltip component.

npm start

Conclusion

All the good things come to an end; likewise, we have completed this React Bootstrap tooltip and popover tutorial; In this tutorial, we learned how to create tooltips, overlay popover component, and step by step answered how to integrate tooltips in react, how to add popovers in react and how to customize tooltip and popover in react using react-bootstrap methods.