Bootstrap 5 update Tooltip Title with Javascript

In Bootstrap 4 I used the following sample code to update the title of the tooltip (where 'statusIcon' is the element, in this case is a font awesome icon, but same principal would apply for a button or anything else:

$(statusIcon).attr('data-original-title', 'Check Error logs for details').tooltip();

Razor page html element:

<i class="fas fa-circle fa-lg" id="statusIcon:@item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>

Reading the manual for Bootrap 5, they don't appear to tell us how to achieve this with Vanilla JS

What I've tried so far in Javascript:

var statusIconId = 'statusIcon:' + pluginId + '';
var statusIcon = document.getElementById(statusIconId);    
document.getElementById(statusIconId).setAttribute("data-bs-original-title", 'Check Error logs for details');

Am using variables in the element Id because I'm working with element in a Razor List View.

Solution

You can update the tooltip title by changing the data-bs-original-title attribute

$(function () {

  // Init
  $('[data-toggle="tooltip"]').tooltip()
  
  // Update jquery
  // $('#tt').attr('data-bs-original-title', 'New Tooltip Title');
  
  // Update js
  document.getElementById('tt').setAttribute('data-bs-original-title', 'New Tooltip Title');
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button type="button" id='tt' class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip title">
  Tooltip
</button>