How to use bootstrap5 tooltip in react

Question

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?

Answer 1

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

Answer 2

This is my vanilla TypeScript version.

1. Install and import bootstrap & typings

   npm i @types/bootstrap bootstrap
   

   import "bootstrap"
   import "bootstrap/dist/css/bootstrap.css"
   

2. Create Tooltip component

   import { Tooltip as BsTooltip } from "bootstrap"
   import React, { useEffect, useRef } from "react"
   
   export const Tooltip = (p: {children: JSX.Element, text: string}) => {
       const childRef = useRef(undefined as unknown as Element)
   
       useEffect(() => {
           const t = new BsTooltip(childRef.current, {
               title: p.text,
               placement: "right",
               trigger: "hover"
           })
           return () => t.dispose()
       }, [p.text])
   
       return React.cloneElement(p.children, { ref: childRef })
   }
   

3. Use

   <Tooltip text="Tooltip text">
       <button className="btn btn-primary" type="button">My button</button>
   </Tooltip>