How to use bootstrap5 tooltip in react

I have react project with bootstrap packages

// npm install bootstrap@next
// npm install bootstrap-icons
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap-icons/font/bootstrap-icons.css'

Then I have the tooltip element

<i className="bi bi-align-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"></i>

The documentation says, we have to execute this javascript in order to enable bootstrap tooltip

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

So I put the code inside componentDidMount method, in a class where I am rendering the tooltip

but I am getting an error

'bootstrap' is not defined no-undef

or when I adjust the import tag to

import { bootstrap } from 'bootstrap/dist/js/bootstrap.bundle.min';

I get another error

Cannot read property 'Tooltip' of undefined

So I am confused how to enable this tooltip?

Solution

You don't need to use react-bootstrap at all since Bootstrap 5 is now vanilla JavaScript...

You can import Bootstrap 5 JS components like this (note .esm version for modular importing)...

import { Tooltip } from 'bootstrap.esm.min.js'

then you can refer to the Tooltip like this...

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    return () => {
      tooltipList.map(t => t.dispose())
    }

React Bootstrap Tooltip example