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.