Hiding minus signs from slider toolTip using JS? | XM Community
Skip to main content

Hi all,
I posted recently about hiding the minus signs from the numbers on a slider, which thankfully has now been solved (more survey context on there if required).
I am now trying to hide the minus signs from the toolTip (or toolTipBox) which accompanies the slider - currently the toolTip is disabled but it would make the slider values much clearer if it could be re-enabled with correct values (no negative signs). Somebody else previously asked here but then stopped responding before it was completely resolved.

Experiment 1 (MutationObserver)


Have seen some suggestions to use a MutationObserver, but I'm fairly new to Javascript so would appreciate any help - this is the code I've compiled (based on the Mozilla explanations of MutationObservers):
// Select the node that will be observed for mutations
const targetNode = document.getElementById(this.questionId + "~1~toolTipBox");

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true, characterData: true };

// Create a new instance of `MutationObserver` named `observer`,
const observer = new MutationObserver(function() {
targetNode.innerHTML = targetNode.innerHTML.replace("-", "");
});

// Start observing the target node for configured mutations
observer.observe(targetNode, config);
It doesn't work and just freezes the webpage (probably because it seems to be self-referring) but I can't think of another way to observe the change and then apply the change to that part!

Experiment 2 (onmousemove)


(Here's another experiment I did which doesn't seem to work either, based on whenever the slider handle is moved - the main problem seems to be actually changing the text within the toolTipBox - if anybody has any suggestions on how to edit the text inside the toolTipBox that would be very helpful!):
var QIDtoolTip = this.questionId + "~1~toolTipBox"
//var QIDtrack = this.questionId + "~1~track"

//function which SHOULD update the numbers to remove negatives
function updateThings() {
document.getElementById(QIDtoolTip).innerHTML.replace("-","");
//document.getElementById(QIDtrack).attr(aria-valuenow, ***SOMEWAYOFREMOVINGMINUSSIGNS);
//document.getElementById(QIDtrack).attr(aria-valuetext, ***SOMEWAYOFREMOVINGMINUSSIGNS);
}

document.getElementById(this.questionId+"~1~handle").onmousemove = updateThings;

Any help would be desperately appreciated!

Honestly, customizing the slider is a pain in Qualtrics. I really don't know why they made it so difficult. I've managed to do somethings with it, but just this thing, took me around 10 odd hours.
In your case, I would suggest skipping the default slider and instead importing a library to make the tooltip.

Thank you for the suggestion ahmedA!
I've found a simple workaround which I'm satisfied with, it's not perfect (minus signs still appear briefly before being hidden) but it does the job well enough for my purpose (and hopefully anybody else's).
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
const QIDtoolTip = this.questionId + "~1~toolTipBox"
const QIDhandle = this.questionId+"~1~handle"

// A bit like cheating, but timer invokes function every millisecond
var timer = setInterval(updateThings, 1);

// Probably overkill, but this makes sure the minus signs
// are replaced ASAP on desktop or touchscreen
QIDhandle.onmousemove = updateThings;
QIDhandle.ontouchmove = updateThings;
QIDhandle.ontouchend = updateThings;
document.onmousemove = updateThings;
document.ontouchmove = updateThings;
document.ontouchend = updateThings;

// Function called updateThings runs every millisecond.
// Checks if toolTipBox contains minus sign, then replaces it with two spaces
function updateThings() {
if (document.getElementById(QIDtoolTip).innerHTML.includes("-")) {
document.getElementById(QIDtoolTip).innerHTML = 
document.getElementById(QIDtoolTip).innerHTML.replace("-", "  ");
}
}
}
Must remember to include this under addOnUnload function (it will prompt you anyway):
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
clearInterval(timer)

});
Finally, to hide minus signs from labels in slider question, insert this anywhere:
jQuery("#"+this.questionId+" ul.numbers li").each(function() { this.innerHTML = this.innerHTML.replace("-",""); });

Your code was super useful Spon but since it invokes the function every millisecond, the text rapidly switches between the old and new value 😓(I need to replace a number with some other text, not simply getting rid of the "-" as in your code).
For example, here I'm replacing 0 with the text "Not at all":
function updateThings() {
if (document.getElementById(QIDtoolTip).innerHTML.includes("0")) { document.getElementById(QIDtoolTip).innerHTML =  document.getElementById(QIDtoolTip).innerHTML.replace("0", "Not at all"); document.getElementById(QIDtoolTip).style.right = 8 + "px"
}
ahmedA your video looks great. which library did you use to make the tooltip? how did you get the slider to look so flawless?

Leave a Reply


Terms & Conditions