时间戳

首页 > 解决方案 > 如何在反应中使用 bootstrap5 工具提示

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

问题描述

我已经用引导程序包对项目做出反应

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

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

标签： reactjstooltipbootstrap-5

解决方案

你根本不需要使用 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 工具提示示例

推荐阅读