How to add custom text to slider tooltip?

TomG Thanks for the solution it worked great except for some edge cases.
When the slider handle is at the start till the near end it shows the full text as shown in the below photo.
However, as it reaches the end of the slider the text is cut short by the question container. It would be great if you can give some insight about how can I make the full text appear? I would not mind even if the text flows out of the question container.

I think you will need to dynamically style the slider tool tip box based on it's position.

TomG I can understand what you are suggesting, however, is there a way the toolTipBox can flow out of the white boundary in the picture?

@Mozaic, I was thinking you would right align when it approach the right side and left align when it approached the left.

https://www.qualtrics.com/community/discussion/comment/25033#Comment_25033I know I'm coming to this post a bit late, but would anybody be able to give any more detail about how this might work?
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`,
// passing it a callback function
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!
Any help would be desperately appreciated!

https://www.qualtrics.com/community/discussion/comment/35498#Comment_35498I am facing the same issue. TomG might have a sample to guide us for sure :)

Spon and Muqaibil - For starters the first line of Spon's code is wrong. Tildes (~) have to be escaped. You don't need to use ids; it would be better to use a class to find the sliders and loop through all of them. Also, it would be better to observe the style attribute of the slider handles.

https://www.qualtrics.com/community/discussion/comment/36166#Comment_36166another point TomG please. where to put the mutaitonObserver code?
let's say I am using MutaitonObserver on Authiticator in order to change its placeholder attribute onload, where exactly should i post my code? look&feel?
Many thanks dear

Muqaibil - For an Authenticator, use a library message and place the code in there (inside a

You should place your script inside the function Qualtrics.SurveyEngine.addOnload(), then you don't need the myInput.onload.

https://www.qualtrics.com/community/discussion/comment/36301#Comment_36301Thanks a lot TomG for this insight. putting the script inside the function Qualtrics.SurveyEngine.addOnload() works well instead of using myInput.onload().

Here below is a thread explaining the full steps about how to change/replace Authenticator's label and set a textbox placeholder...
https://www.qualtrics.com/community/discussion/15597/removing-authenticator-label-and-set-placeholder-for-the-textbox-insteadMany thanks again for your insight TomG ...

it took me a while to figure out the MutationObserver so adding it here for anyone else
/*Place your JavaScript here to run when the page is fully displayed*/
// Select the node that will be observed for mutations
const targetNode = document.getElementsByClassName("sliderToolTipBox")[0];
let observer = new MutationObserver(function() {
targetNode.innerHTML = Math.abs(targetNode.innerHTML);
observer.disconnect(); // turn observer off;
observer.observe(targetNode, {
attributes: true,
childList: true, // observe direct children
subtree: true, // and lower descendants too
characterDataOldValue: true // pass old data to callback
});// turn back on

});

// observe everything except attributes
observer.observe(targetNode, {
attributes: true,
childList: true, // observe direct children
subtree: true, // and lower descendants too
characterDataOldValue: true // pass old data to callback

});

Hi JohnnyP10,
Thanks for the post here. I think (!) I'm looking for the same solution but don't really understand completely how this is used. Does the mutationobserver function need a ref to an external url (by putting something in the Look and Feel / Header)?
I'm looking to replace the value that appears in the tooltip when you slide the slider with whatever equivalent label there is (or based on another set of labels).
How do I implement this - I'm assuming that you use the above code but I'm not sure is you add this to the onload / onready section.
Please can you advice or if possible provide a simple example survey file?
Thanks in advance
Rod Pestell