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.

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?

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!

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.

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.

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

});