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

Question

我正在使用 Bootstrap 5.2 版本。我正在尝试使用工具提示插件的 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".

有没有办法将数组传递给数据属性，或者这是 Bootstrap 的一个错误？

Answer 1

这是您想要实现的目标的工作片段。

我将位于

bs-data-fallback-placement

内部的字符串记录到一个新数组，然后重置

dataset

元素的

span

属性。

如果我错了，请纠正我，如果这就是你想要实现的目标。

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(",");

 span.removeAttribute('dataset');
span.setAttribute('bs-fallback-placements', array);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>