Can't pass array to HTML data attribute for Bootstrap tooltips

Question

I'm using version 5.2 of Bootstrap. I'm trying to use the fallbackPlacements option of the Tooltips plugin. The problem is that fallbackPlacement takes an array, but doesn't seem to accept one through the data attribute, which the same documentation says should be possible by using the data attribute 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>

Instead, this causes the tooltip to fail with the following error in the console:

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

Is there a way to pass the array through to the data attribute, or is this a bug with Bootstrap?

Answer 1

Here is a working snippet for what you want to achieve.

I logged the string that is located inside the bs-data-fallback-placement to a new array and then reset the dataset attribute of your span element.

Correct me if I am wrong if that is what you want to achieve.

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>