In this tutorial, we will ascertain how to implement Bootstrap Tooltip in React js application. To create the React tooltip component, we will use the React Bootstrap library.

We will make you familiar with the knitty-gritty of using Bootstrap in React js environment.

Bootstrap is a CSS framework used for making user interface components. It is made up of HTML, CSS and JS; UI components that are not jQuery driven can be implemented using a simple bootstrap library.

However, in most cases, some components require javascript to run the UI plugin. For that case, we use React bootstrap package, and this module offers bootstrap components that are javascript based.

React Js Bootstrap Tooltip Example

• Step 1: Build React App
• Step 2: Install React Bootstrap Package
• Step 3: Make Component File
• Step 4: Create Tooltip in React
• Step 5: Add Component in App
• Step 6: View App on Browser

Build React App

In this step, we will generate a new react app, execute the command to install the app.

npx create-react-app react-howdy

Now, get inside the app folder.

cd react-howdy

Install React Bootstrap Package

Use the given below command to install the react bootstrap package.

npm install react-bootstrap bootstrap

Open the App.js file, import the css as suggested below.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Make Component File

In the app directory, create the /components folder, and the /BotTooltip.js file.

import React from 'react'

export default function BotTooltip() {
  return (
    <h2>React Tooltip Example</h2>
  )
}

Create Tooltip in React

In this step, you have to open the BotTooltip.js file, insert the given code into the file.

import React, { useState, useRef } from 'react'
import { Button, Tooltip, Overlay } from 'react-bootstrap'

export default function BotTooltip() {
  const [evokeTooltip, initTooltip] = useState(false)
  const target = useRef(null)

  return (
    <div>
      <h2 className="mb-4">React Js Tooltip Example</h2>

      <Button ref={target} onClick={() => initTooltip(!evokeTooltip)}>
        Show Bootstrap Tooltip!
      </Button>
      <Overlay target={target.current} show={evokeTooltip} placement="right">
        {(props) => (
          <Tooltip id="overlay-example" {...props}>
            Only once in your life, I truly believe, you find someone who can
            completely turn your world around.
          </Tooltip>
        )}
      </Overlay>
    </div>
  )
}

Add Component in App

Let us add or import the tooltip component into the App.js file.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import BotTooltip from './components/BotTooltip'

function App() {
  return (
    <div className="container mt-5">
      <BotTooltip />
    </div>
  )
}

export default App

View App on Browser

In this last section, we will show you how to start the react app, you have to execute the given command from the terminal.

npm start

Open the browser and test the tooltip in react app.

Summary

This simple tutorial has taught us how to integrate bootstrap tooltip in React component easily.

We saw how to install and eloquently add a react-bootstrap module to build the React tooltip component. We believe you will like this short guide and help your learning endeavours.