Bootstrap tooltip for dynamically changing content

Question

I use Bootstrap tooltips to create beautiful HTML tooltips for items. I basically have a skill image in the form of a .png image

<img id="skill" src="ice-bolt-inactive.png" data-toggle="tooltip" data-html="true" title="" />

i define the image into a variable

let skillImage = document.getElementById('skill');

then i initiate the tooltip like this:

skillImage.title = '<p class="skill-title">' + iceBolt.name + '</p><p class="skill-text">' + iceBolt.description + '</p><p class="skill-text">' + iceBolt.setLevel() + '</p><p class="skill-text">' + iceBolt.setDamage() + '</p><p class="skill-text">' + iceBolt.setDuration() + '</p><p class="skill-text">' + iceBolt.setManaCost() + '</p><p class="skill-title">' + iceBolt.name + ' Receives Bonuses From: </p><p> ' + iceBolt.description + '</p>';

Now when i click on the skill image, i fire up an onclick function which increments the iceBolt.level++; . This successfully does that ( i also log the iceBolt.level into the console so i confirm it's changing) but the bootstrap tooltip remains unchanged (doesn't reflect the iceBolt.level, even though i've set it up to display it)

Is my usage of the bootstrap tooltip bad or is it that the bootstrap tooltips won't handle something like this. I want to use them as they are responsive and easy to use.

Answer 1

This works for Bootstrap 4:

    const title = 'Your new tooltip content';
    $el.attr('data-original-title', title);

(Be sure not to do this instead, as it won't work: $el.data('original-title', title);).

Answer 2

For anyone who is looking in the future. This solution is for Bootstrap - 5, using JQuery and Javascript.

1. Init the Tooltip

   var tootTipTitleText = 'True or False';
   
   $(document).ready(function () {
   
       //Enable ToolTip
       $('[data-bs-toggle="tooltip"]').tooltip(
           {
               title: tootTipTitleText,
               html: true,
           }
       );
   });
   

2. Remove the Previous Tooltip on Button Click

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

   1. Get the value to check.

      if(checkBoxValue == true) {
          tootTipTitleText = 'true';
      } else {
          tootTipTitleText = 'false';
      }
      

   2. Init another tooltip

      $('[data-bs-toggle="tooltip"]').tooltip(
          {
              title: tootTipTitleText,
              html: true,
          }
      );
      

   3. Display The Tooltip

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

3. Sample HTML and JS Function

function changeToolTipTitle()
{
    $('[data-bs-toggle="tooltip"]').tooltip("dispose");

    var checkBoxValue = $("#toolTipCheckBox").is(":checked");

    if(checkBoxValue == true)
    {
        //title="Checked or Unchecked"
        tootTipTitleText = 'Checked';
    }
    else
    {
        tootTipTitleText = 'Unchecked';
    }

    $('[data-bs-toggle="tooltip"]').tooltip(
        {
            title: tootTipTitleText,
            html: true,
        }
    );

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div id="toolTipCheckBoxDiv" class="form-check inputCheckBox" data-bs-toggle="tooltip" title="">
<input class="form-check-input" type="checkbox" id="toolTipCheckBox" value="true" onchange="changeToolTipTitle();" />
<label class="form-label" for="toolTipCheckBox">Check</label>
</div>

Answer 3

UPDATE:

Code snipper shared, will help you update your tooltip title whenever some particular event occurs in your application.

The idea is: Setting my title dynamically using a function call which returns the updated data.

 $("#skill").tooltip({
    placement: "right",
    title: userDetails, // userDetail() is a function which will return our updated data
    html: true,
  });

Function will look something like;

// Get user details for tooltip
function userDetails() {
  return tooltipText;
}

The event handler in which we update the content of tooltip.

 document.querySelector("button").addEventListener("click", () => {
  tooltipText += "Add"; // Updating my data
  userDetails();// Sending updated Title
})

FULL CODE:

$(document).ready(function () {
  // Add tooltip
  $("#skill").tooltip({
    placement: "right",
    title: userDetails,
    html: true,
  });
});
var tooltipText = "Hello";
// Get user details for tooltip
function userDetails() {
  return tooltipText;
}

document.querySelector("button").addEventListener("click", () => {
  tooltipText += "Add";
  userDetails();
});

<html lang="en">
  <head>
    <title>Dashboard</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <img
      id="skill"
      class="skill"
      src="https://picsum.photos/100"
      data-toggle="tooltip"
      data-html="true"
      data-selector="true"
      alt="skill image"
    />
    <p id="ice-bolt-level"></p>
    <button>Click Me</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script src="script.js"></script>
  </body>
</html>

YOU CAN USE THE SAME LOGIC TO PROCEED FORWARD IN YOU APPLICATION.