Bootstrap 5与webpack的迁移问题

Question

我正在尝试从Bootstrap 4迁移到Bootstrap 5。当我这样做时，下拉菜单、弹出器和工具提示都不起作用。我和webpack一起使用bootstrap。

Bootstrap 5样式工作正常。

包括由webpack饰演的popper

​

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
  })

将工具提示和弹出窗口从引导导入为

​

​

import { Tooltip, Popover } from 'bootstrap';

​

弹出窗口的HTML

​

<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>                   

​

如果有人能帮我的话会很高兴的。

我正在使用https://github.com/puikinsh/Adminator-admin-dashboard模板。

谢谢。

Answer 1

在4.6和5.0之间，某些语法发生了变化。具体地说：

4.6正在使用... data-toggle="popover" ... data-content=...>

5.0正在使用... data-bs-toggle="popover" ... data-bs-content=...

您的HTML输出是4.6和5.0语法的混合。

Answer 2

在Bootstrap 5中，工具提示必须通过Javascript触发。更多细节可以在official Bootstrap documentation page上找到。

您可以使用以下代码触发和保存页面中的所有工具提示：

const tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
)

let tooltip_list = tooltipTriggerList.map(
    function (tooltipTriggerEl) {
        return new Tooltip(tooltipTriggerEl)
    }
)