Bootstrap 5 update Tooltip Title with Javascript

Question

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.

Answer 1

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answer 2

Since Bootstrap 5.0 no longer requires jQuery, use document.querySelector(), then reinitialize the tooltip after modifying the element:

// initialize
const tooltipElement = document.querySelector('[data-bs-toggle="tooltip"]')
let bsTooltip = new bootstrap.Tooltip(tooltipElement)

// update
tooltipElement.title = 'New Title'
bsTooltip = new bootstrap.Tooltip(tooltipElement)

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<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>

(updated to use your Razor page element)

Answer 3

Here is example if your tooltip is in loop, and you want to update the clicked button tooltip.

Use case:

Copy button in table row using clipboard.js

Code:

index.blade.php

<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard" class="btn-clip btn btn-primary" data-clipboard-text="{{ user.domain }}">Copy</button>

index.js

let clipboard = new ClipboardJS('.btn-clip');
 
clipboard.on('success', function (e) {
    let trigger_button = e.trigger;

    // update the tooltip title, get the tooltip instance, and show it
 
    trigger_button.setAttribute('data-bs-original-title', 'Copied!');
 
    let btn_tooltip = bootstrap.Tooltip.getInstance(trigger_button);
 
    btn_tooltip.show();

    // reset the tooltip title
 
    trigger_button.setAttribute('data-bs-original-title', 'Copy to clipboard');
    
});

Answer 4

I had to do the following to get it working with Bootstrap 5 and ClipboardJS 2:

<script src="js/clipboard.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.js"></script>

<script>
$(document).ready(function () {

  // Tooltip

  $('[data-bs-toggle="tooltip"]').tooltip()

  // Clipboard

  const clipboard = new ClipboardJS('.btn-clipboard')

  clipboard.on('success', function(e) {

    $('.tooltip-inner').html('Copied!')
    $(e.trigger).tooltip('update')

    e.clearSelection()
  })

  clipboard.on('error', function (e) {
    var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'

    $('.tooltip-inner').html(fallbackMsg)
    $(e.trigger).tooltip('update')
  })
})
</script>


<button type="button" class="btn btn-clipboard" data-clipboard-text="copied text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click/touch to copy">Button</button>

Answer 5

only thing worked for me was disposing tooltip and rebuilding it again with setTimeout and 'enable' instead of 'show' for repeat hover..

$('#shareLink').on('click', function (e) {
  
  $('#shareLink').tooltip('dispose').attr('title', 'Link copied!');
  $('#shareLink').tooltip('show');

  setTimeout( function () {
    $('#shareLink').tooltip('dispose').attr('title', 'Copy link to Clipboard');
    $('#shareLink').tooltip('enable');
  }, 2000);

});