React bootstrap tooltip component use with example

React bootstrap is a component-based library that provides bootstrap features as react component, Today, We will use a Tooltip component to show informative text to users. We will include 2 scenarios in this example, the show tooltip by clicking on the element and the show tooltip by hovering an element.

You can download the working example of a tooltip component https://github.com/technostuf/react-bootstrap-tooltip-example

Create a React application
Install react-bootstrap library
Add code to the file
Run a React application

Create a React application

Create a React app using the below command.

 npx create-react-app react-bootstrap-tooltip-example

The above command will create a new folder with the app name so you need to move into that folder, use the below command to change the directory.

 cd react-bootstrap-tooltip-example

Install react-bootstrap library

After creating react app we need to install react-bootstrap and bootstrap from npm or yarn.

 npm install --save react-bootstrap bootstrap
 OR using yarn
 yarn add react-bootstrap bootstrap

Add code to the file

Create a component file TooltipComponent.js to hold the click to see the tooltip code and TooltipHoverComponent.js will hold the hover to see the tooltip code

TooltipComponent.js (Click to see tooltip)

import React, { useState, useRef } from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Button, Overlay, Tooltip } from "react-bootstrap";

const TooltipComponent = () => {
    const [show, setShow] = useState(false);
    const target = useRef(null);
    return (
        <>
            <Button ref={target} onClick={() => setShow(!show)}>
                Click me!
            </Button>
            <Overlay target={target.current} show={show} placement="right">
                {(props) => (
                    <Tooltip id="overlay-id-1" {...props}>
                        Tooltip text here
                    </Tooltip>
                )}
            </Overlay>
        </>
    )
}
export default TooltipComponent;

TooltipHoverComponent.js (Hover to see tooltip)

import React from "react";
import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";

const TooltipHoverComponent = () => {
    const toolTipContent = (props) => (
        <Tooltip id="button-tooltip" {...props}>
            Tooltip text here
        </Tooltip>
    );
    return (
        <>
            <OverlayTrigger
                placement="right"
                delay={{ show: 200, hide: 400 }}
                overlay={toolTipContent}
            >
                <Button variant="success">Hover to see Tooltip</Button>
            </OverlayTrigger>
        </>
    )
}
export default TooltipHoverComponent;

Finally, you have to import both files into App.js

import './App.css';
import TooltipComponent from './TooltipComponent';
import TooltipHoverComponent from './TooltipHoverComponent';
import "bootstrap/dist/css/bootstrap.css";

function App() {
  return (
    <div className="App">
      <div className='row'>
        <h1>React bootstrap Tooltip example - technostuf.com</h1>
        <div className='col-md-3'>
          <TooltipComponent />
        </div>
        <div className='col-md-3'>
          <TooltipHoverComponent />
        </div>
      </div>
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of a tooltip component.

https://github.com/technostuf/react-bootstrap-tooltip-example