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

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.

Bootstrap tooltip for dynamically changing content

Question

1 answers

solution1
0 2020-12-27 20:02:11

Bootstrap tooltip for dynamically changing content

Question

1 answers

solution1 0 2020-12-27 20:02:11

solution1
0 2020-12-27 20:02:11