React Bootstrap Tooltip Tutorial

Hello Devs,

In this tutorial, we are going to see example of react bootstrap tooltip example-collapse-text.

Follow this step by step guide given below:

Install react-bootstrap

npm install react-bootstrap bootstrap

Run this command:

import 'bootstrap/dist/css/bootstrap.css';

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
   
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

Example 1: Bootstrap Tooltip on Hover

src/App.js

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
   
function App() {
   
  function renderTooltip(props) {
    return (
      <Tooltip id="button-tooltip" {...props}>
        Simple Tooltip Demo
      </Tooltip>
    );
  }
    
  return (
    <div className="container">
        <h1>React Bootstrap Tooltip Example - Rathorji.in</h1>
  
        <OverlayTrigger
          placement="right"
          delay={{ show: 250, hide: 400 }}
          overlay={renderTooltip}
        >
          <Button variant="success">Hover Me!</Button>
        </OverlayTrigger>
   
    </div>
  );
}
   
export default App;

Example 2: Bootstrap Tooltip on Click

src/App.js

import React, {useState, useRef} from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, Tooltip, Overlay } from 'react-bootstrap';
   
function App() {
  const [show, setShow] = useState(false);
  const target = useRef(null);
   
  return (
    <div className="container">
        <h1>React Bootstrap Tooltip Example - Rathorji.in</h1>
   
        <Button ref={target} onClick={() => setShow(!show)}>
          Click Me!
        </Button>
        <Overlay target={target.current} show={show} placement="right">
          {(props) => (
            <Tooltip id="overlay-example" {...props}>
              Tooltip Click Demo
            </Tooltip>
          )}
        </Overlay>
   
    </div>
  );
}
   
export default App;

Run this command:

npm start

I hope this example helps you.