Bootstrap 5.2 update Tooltip Title with Javascript is not working

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Hello Update Tooltip Title with Javascript was working fine in version v5.1.3 of bootstrap.bundle.js, but now it is not working using version v5.2.0-beta1 of the same file.

This is the code I use

$(function () {
 $('[data-toggle="tooltip"]').tooltip()
  document.getElementById('tt').setAttribute('data-bs-original-title', 'New Tooltip Title');
})

stackoverflow: Bootstrap 5 update Tooltip Title with Javascript

Reduced test cases

with version 5.0.0 https://codepen.io/moshair/pen/ExQweey

with version 5.2 beta https://codepen.io/moshair/pen/zYREJmq

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.2.0-beta1

[Supportic]

@moshair I see what you are trying to do. I downloaded the source code and unfortunately it seems that they dropped support for that attribute. Reading the source code also indicates that this attribute was never documented and essentially was never meant to be used. https://github.com/twbs/bootstrap/blob/v5.1.3/js/src/tooltip.js#L237

Now you should be able to use the function setContent on tooltips like documented here. https://getbootstrap.com/docs/5.2/components/tooltips/#methods

Your new way of changing it is now the following:

let carsArr = ["", "Saab", "Volvo", "BMW"];

function Showtt(self,v) {
  const tooltip = bootstrap.Tooltip.getInstance(self)
  tooltip.setContent({'.tooltip-inner': carsArr[v]}) // key is the class container of the content
}

and your HTML element

<span id='tt_1' class="btn btn-secondary" onmouseover="Showtt(this,1)" data-bs-toggle="tooltip" data-bs-placement="top" title="1">1</span>

[Supportic]

What is your goal? Keep the old title or just overwrite it?

dublicate to: https://github.com/twbs/bootstrap/issues/32944

I couldn’t find any line in the documentation talking about the data-bs-original-title attribute. The problem you mentioned occured in bootstrap 4 according to the stackoverflow link you linked. The title attribut is now responsible for displaying the tooltip content. If you first set the title and then initialize the tooltip, everything is working.

document
  .getElementById("tt")
  .setAttribute("data-bs-title", "New Tooltip Title");
new bootstrap.Tooltip(jQuery('[data-toggle="tooltip"]'));

This was a solution mentioned in your stackoverflow link: https://stackoverflow.com/a/65863062/10192487 However it should be possible to use data-bs-title because the options are saying that you can use the prefix data-bs- to adjust the options which working since 5.1 or 5.2. [doc ref]

Your examples seem to be a bit odd.

Your 5.0 example includes beta source Links which might not represent a stable behaviour. Since 5.0 Tooltips are getting initialized like this new bootstrap.Tooltip(jQuery('[data-toggle="tooltip"]')); [doc ref]

Bootstrap should according to documentation only initialize with jQuery by searching for the jQuery Object on window instead of $. [doc ref]

Both of your button markups include the data-placement attribute which should be data-bs-placement in 5.0. [doc ref]