Bootstrap 无法将数组传递给引导工具提示的HTML数据属性

lkaoscv7  于 2023-04-09  发布在  Bootstrap
关注(0)|答案(1)|浏览(139)

我使用的是Bootstrap的5.2版本。我尝试使用Tooltips插件的fallbackPlacements选项。问题是fallbackPlacement接受一个数组,但似乎不接受通过data属性的数组,同一文档说应该可以通过使用data属性bs-data-fallback-placement

<span data-bs-toggle="tooltip" data-bs-placement="auto" 
 data-bs-fallback-placements="['top','bottom']" title="This is the tooltip text">Hover Over Me</span>

相反,这会导致工具提示失败,并在控制台中显示以下错误:

Uncaught TypeError: TOOLTIP: Option "fallbackPlacements" provided type "string" but expected type "array".

有没有一种方法可以将数组传递给data属性,或者这是Bootstrap的一个bug?

p4tfgftt

p4tfgftt1#

下面是您想要实现的工作片段。
我将位于bs-data-fallback-placement中的字符串记录到一个新数组中,然后重置span元素的dataset属性。
如果我错了,请纠正我,如果这就是你想要的。

let span = document.getElementsByTagName("span")[0];

let dataset = document.getElementsByTagName("span")[0].dataset.bsFallbackPlacements;

let string = dataset.replace("\"", "").replace("\[", "").replace("\]", "").replace(/['"]+/g, '');

let array = string.split(",");

console.log(array);

span.dataset.bsFallbackPlacements = array;
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container shadow min-vh-100 py-2">
    <div class="row">
        <div class="col">
            <span data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-fallback-placements="['top','bottom']" title="This is the tooltip text">Hover Over Me</span>
        </div>
    </div>
</div>

相关问题