How to Use Bootstrap Tooltip in React?

This simple article demonstrates of react bootstrap panel tooltip example. if you have question about bootstrap tooltip in react js then i will give simple example with solution. This article goes in detailed on expand tooltip in react bootstrap 4. it's simple example of react bootstrap tooltip example-collapse-text. Let's get started with how to use bootstrap tooltip in react.

I will show you how to use bootstrap tooltip in react application. you have to just simple follow few step to done simple example of bootstrap tooltip in react js. in this example we will install react-bootstrap and use their tooltip class to tooltip modal in react app.

just follow few step to add bootstrap tooltip in react native app.

Preview:

Install react-bootstrap

Now here, we have to install bootstrap using npm react-bootstrap command. so let's run bellow command to install bootstrap in react.

npm install react-bootstrap bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

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

in our App.js file, we will write code for open simple bootstrap 4 tooltip using react-bootstrap library.

Import Button, Tooltip, OverlayTrigger from react-bootstrap library.

let's add bellow code:

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 - HDTuto.com</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

in our App.js file, we will write code for open simple bootstrap 4 tooltip using react-bootstrap library.

Import Button, Tooltip, Overlay from react-bootstrap library.

let's add bellow code:

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 - HDTuto.com</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;

Now we are ready to run our example by bellow command:

npm start

Now you can check it. it's layout as like above.

I hope it can help you...