How to use bootstrap5 tooltip in react

user_2333663 0
Viewed 4954

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?

bootstrap-5 reactjs tooltip
4 Answers

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...

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

React Bootstrap Tooltip example

user_1714560

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>
user_3229840

For using bootstrap in React, it is recommended to use react-bootstrap.

The steps to integrate that in your project are:

  1. Install bootstrap in your project by adding package through terminal : npm install react-bootstrap bootstrap
  2. Add this in your App.js.
  3. import 'bootstrap/dist/css/bootstrap.min.css';
  4. Add tooltip in your component by importing tooltip as follows: import { Tooltip} from 'react-bootstrap';

This would be the same for every react-bootstrap component

React-Bootstrap Tooltip documentation : https://react-bootstrap.github.io/components/overlays/#tooltips

user_53037970

When using Bootstrap with React, it is highly recommended to use React-Bootstrap.

React-Bootstrap has an OverlayTrigger component and a Tooltip component you can use for adding hover-able Tooltips.

In your case, it would look something like this

<OverlayTrigger
  placement={'top'}
  delay={{ show: 250, hide: 400 }}
  overlay={
    <Tooltip>
      Tooltip on top
    </Tooltip>
  }
>
  <i className="bi bi-align-center" />
</OverlayTrigger>
user_100848820
Related