Question

93

Bootstrap 5 update Tooltip Title with Javascript

rated 0 times [ 99] [ 6] / answers: 1 / hits: 14877 / 3 Years ago, sat, january 23, 2021, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kevonmoisesf

Add To Favorites

Follow

Total Points: 693

Total Questions: 101

Total Answers: 128

Location: Reunion

Member since Mon, Dec 28, 2020

3 Years ago

kevonmoisesf questions

1 How to wait for reaction and only then send message [discord.js]

Thu, Aug 13, 20, 00:00, 4 Years ago

1 How do you display content of a .JSON file using Discord.js?

Tue, Feb 18, 20, 00:00, 4 Years ago

1 Flatpickr : set default date only if date value is null/empty

Tue, Nov 5, 19, 00:00, 5 Years ago

1 VueJs object key/value is not reactive in v-for loop

Wed, Jun 12, 19, 00:00, 5 Years ago

1 How to pass HTML string from flask app to HTML template as a DOM element and then appendChild

Tue, Apr 23, 19, 00:00, 5 Years ago

View All

answered 3 Years ago kaylinshayd · Accepted Answer

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>