如何在 react 中使用 bootstrap5 tooltip

Question

我有带有引导程序包的 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>

文档说，我们必须执行这个javascript才能启用引导工具提示

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

所以我将代码放在 componentDidMount 方法中，在我呈现工具提示的类中

但是我收到一个错误

'bootstrap' 未定义 no-undef

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

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

我得到另一个错误

Cannot read property 'Tooltip' of undefined

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

Answer 1

这是我的 vanilla TypeScript 版本。

1. 安装和导入 bootstrap & typings

   npm i @types/bootstrap bootstrap
   

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

2. 创建

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

3. 使用

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

Answer 2

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

您可以像这样导入 Bootstrap 5 JS 组件（注意 .esm 版本用于模块化导入）...

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

然后你可以像这样参考Tooltip...

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

React Bootstrap 工具提示示例

Answer 3

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

React-Bootstrap 有一个

OverlayTrigger

组件和一个

Tooltip

组件，您可以使用它来添加悬停工具提示。

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

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

Answer 4

React中使用bootstrap，推荐使用

react-bootstrap

.

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

1. 通过终端添加包在项目中安装引导程序：

   npm install react-bootstrap bootstrap

2. 将此添加到您的

   App.js

   .

3. import 'bootstrap/dist/css/bootstrap.min.css';

4. 通过导入工具提示在您的组件中添加工具提示，如下所示：

   import { Tooltip} from 'react-bootstrap';

这对于每个

react-bootstrap

组件都是一样的

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