How to align the tooltip box with the slider handle? | XM Community
Skip to main content

Hello all,
I have piped in the starting position on a slider question from a previous question (and manipulated it by adding 20). I also got the tooltip box to display the manipulated value. However, I can't align the tooltip box to be above the slider handle. Can anyone help me with this? Thanks a lot! Here is my code so far:
{
  var that = this.questionId;
  var result = parseInt("${q://QID139/TotalSum}");
var value = result + 20;
this.setChoiceValue(1, value);
document.getElementById(that + '~1~toolTipBox').innerHTML = value;
document.getElementById(that + '~1~toolTip').style.top = '-84px';
document.getElementById(that + '~1~toolTipBox').style.width= value + "px";
});

Hi there, if you still need, I was able to put this in place by adding the below JS to the slider question, updated with your Constant Sum Total QID139.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

var result = parseInt("${q://QID139/TotalSum}");
var value = result + 20;
this.setChoiceValue(1, value);

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var result = parseInt("${q://QID139/TotalSum}");
var value = result + 20;
var left1 = document.getElementById(qid + '~1~handle').style.left;

document.getElementById(qid + '~1~toolTip').style.top = '-84px';
document.getElementById(qid + '~1~toolTipBox').innerHTML = value;
document.getElementById(qid + '~1~toolTip').style.left = left1;
document.getElementById(qid + '~1~toolTip').style.display = "block";

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});
Also, the -84 sounds like you are using Modern laout. If anyone needs to update for Classic or Flat, Classic is -51 on both desktop and mobile but Flat is -65 on desktop and -59 on mobile because the font changes at 480px. To get around that, set the JS for -65 and add the below CSS to the survey's Look & Feel in the Style section:
@media (max-width: 480px) {
.JFEScope .BarContainer .sliderToolTipBox {
    font-size: 18px !important;
}
}

Hi Tom,
Thanks a lot. My task changed in the process and I went for a different solution, but what you have shared looks great.

All the best,
Elitza

Leave a Reply


Terms & Conditions