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?

Oris Sin · Accepted Answer · 2024-05-27 09:29:27Z

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>

edited May 27, 2024 at 9:29

answered Apr 6, 2023 at 10:09

Oris Sin

1,2501 gold badge18 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hashim Aziz Over a year ago

I'll test this solution later to confirm it works, but if it takes a hack like this just to pass an array through to something in the documentation that expects an array, I think this probably counts as a Bootstrap bug. Maybe I'll report it as one later.

Raj Over a year ago

I don't think this works. From what I've read, if you set a dataset value to an array, as soon as you read it, it will convert it back to a string again. And you'll get an error that fallbackPlacements is being passed a string instead of an array. I also couldn't get your example to work.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related