Hello!

I have created a constant sum question with 8 sliders. When moving the slider handles, the outcome is updated live and based on a calculation in the next text question. Now I added a tooltip box to the sliders, which I want to fill with the following: The previous question QID37 is a text entry question (number), I want to use the number inserted there to be multiplied with the slider value and the result to be divided by 100 (basic rule of three). The resulting value should be shown in the slider tooltip box, changing dynamically depending on the handle position (maybe even a “km” added behind the number). I tried using a mutation observer, but when I included it in the js code, my outcome was not updated dynamically anymore (and the tooltip box stayed blank).

I am really grateful for any help with my code! Especially on how to include the mutation observer. 

The working java script code with empty tooltip boxes which I want to fill is: 

Qualtrics.SurveyEngine.addOnload(function(){

  /* Set initial values */

  var totalPoints = 800;
  var remainingPoints = 800;

  /* Get the slider elements */
  var sliders = document.querySelectorAll(' .value input(type=text]');
  console.log(sliders)
    
  /* Add event listeners to the sliders */
  for (var i = 0; i < sliders.length; i++) {
jQuery('#'+this.questionId).change(function(){
      /* Calculate the total points allocated */

      var totalAllocated = 0;

      for (var j = 0; j < sliders.length; j++) {
          
        totalAllocated += Number(sliders�j].value);
console.log(totalAllocated)
      }

      /* Calculate the remaining points */
      remainingPoints = totalPoints - totalAllocated;
    
      /* Display the annual outcome */
var annualOutcome = totalPoints - totalAllocated;

jQuery("#QID70 .QuestionText")s0].innerHTML = "Your annual outcome is " + annualOutcome + "€";

Qualtrics.SurveyEngine.setEmbeddedData('annualOutcome', annualOutcome);

    });
  }
});

And the css for my tooltip box is: 

.handle {
  position:relative; /* making the .handle span a container for the tooltip text */
  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
}

.handle:before {
  content: attr(data-text); 
  position:absolute;
  /* position above the handle */
  bottom: 100%;
  left: 50%;
  transform:translate(-50%, -15px);
  /* basic styles */
  width:100px;
  height: 25px;
  padding:10px;
  border-radius:5px;
  background:#FFF;
  color: #000;
  text-align:center;
  font-size: 16px;
  line-height: 1.2;
  border: 1px solid #000; /* add a black border */
}

.handle:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, 0);
  border: 10px solid transparent;
  border-top-color: #000;
  display: none;
}

.handle:hover:before, .handle:hover:after {
  display:block;
}