工具提示仅在 Bootstrap 5 中显示在顶部

Question

您好，我在 Laravel 7 中使用 Currently v5.1.3 Bootstrap...我正在使用 bootstrap.bunble.min.js 文件。通过 data-bs-toggle 属性调用 tooltip 函数：

    <span class="badge-sale"
    data-bs-toggle="tooltip"
    title="Ends in 3 hours from now">
    Sale!</span>

以及我的 js 文件中工具提示的初始化器：

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

仅在网络工具提示的顶部显示正确，但当我进一步向下滚动时，它不再显示。

Answer 1

Bootstrap's .container-fluid class已经被使用了，所以在初始化Tooltip的时候作为容器参数传入，修改如下：

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

工具提示仅在 Bootstrap 5 中显示在顶部

Tooltip only showing in top in Bootstrap 5

twitter-bootstrap-tooltip

bootstrap-5