如何在反应中使用 bootstrap5 工具提示

Question

我有 bootstrap 个软件包的 React 项目

// 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'

然后我有工具提示元素

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

documentation 说，我们必须执行此 javascript 才能启用 bootstrap 工具提示

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

所以我将代码放在 componentDidMount 方法中，在 class 我正在渲染工具提示的地方

但我遇到了错误

'bootstrap' is not defined no-undef

或者当我将导入标签调整为

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

我收到另一个错误

Cannot read property 'Tooltip' of undefined

所以我很困惑如何启用此工具提示？

Answer 1

React使用Bootstrap时，强烈推荐使用React-Bootstrap。

React-Bootstrap 有一个 OverlayTrigger component and a Tooltip 组件，可用于添加悬停工具提示。

在你的情况下，它看起来像这样

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

Answer 2

在React中使用bootstrap，推荐使用react-bootstrap。

将其集成到您的项目中的步骤是：

通过终端添加包在你的项目中安装bootstrap：npm install react-bootstrap bootstrap
将此添加到您的 App.js。
import 'bootstrap/dist/css/bootstrap.min.css';
通过导入工具提示在您的组件中添加工具提示，如下所示：import { Tooltip} from 'react-bootstrap';

这对每个 react-bootstrap 组件都是一样的

React-Bootstrap 工具提示文档：https://react-bootstrap.github.io/components/overlays/#tooltips

Answer 3

你根本不需要使用 react-bootstrap 因为 Bootstrap 5 现在是 vanilla JavaScript...

您可以像这样导入 Bootstrap 5 个 JS 组件（注意 modular importing 的 .esm 版本）...

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

然后你可以像这样参考工具提示...

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

React Bootstrap Tooltip example

Answer 4

这是我的原始 TypeScript 版本。

安装并导入 bootstrap & typings

npm i @types/bootstrap bootstrap

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

创建Tooltip组件

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 })
}

使用

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

如何在反应中使用 bootstrap5 工具提示

How to use bootstrap5 tooltip in react

tooltip

reactjs

bootstrap-5