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

https://www.qualtrics.com/community/discussion/comment/36168#Comment_36168TomG do you mean :

• creating a new message in the library


• in the source code of message, Create onLoad function


• getElementById for Authenticator


• setAttribute of placeholder for that selected element (Authenticator)

That's the basic gist. But the function is Qualtrics.SurveyEngine.addOnload and the Authenticator isn't an element, it is a page.

https://www.qualtrics.com/community/discussion/comment/36170#Comment_36170Thanks TomG ...
as I checked Authenticator is appearing on the same page load that occur before. I have a question with a page break then Authenticator appears after that. I trace the elements and see that a DOM is inserted not a new page is loaded when i move next to authenticator part..

Anyways, if possible, what is how to getElement of Authenticator textbox in order to apply the functions on Qualtrics.SurveyEngine.addOnload to set the placeholder attribute?

Basically, I was able to change the placeholder attribute of Authenticator onblur and onFocus events as followed but I could not onload event as shown below...

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