How to show custom label when respondent hovers over the star rating question?

try this
 

Qualtrics.SurveyEngine.addOnload(function() {
    var labels = {
        1: "Bad",
        2: "Poor",
        3: "Average",
        4: "Good",
        5: "Excellent"
    };

    function showLabelOnHover(choiceNumber) {
        var choice = document.querySelector('[id^="' + this.questionId + '"][data-choice="' + choiceNumber + '"]');
        var label = document.createElement("div");
        label.innerHTML = labels[choiceNumber];
        label.classList.add("star-label");
        choice.appendChild(label);
    }

    function hideLabelOnHover(choiceNumber) {
        var choice = document.querySelector('[id^="' + this.questionId + '"][data-choice="' + choiceNumber + '"]');
        var label = choice.querySelector(".star-label");
        if (label) {
            choice.removeChild(label);
        }
    }

    var choices = document.querySelectorAll('[id^="' + this.questionId + '"][data-choice]');
    for (var i = 0; i < choices.length; i++) {
        var choiceNumber = parseInt(choices[i].getAttribute("data-choice"));
        choices[i].addEventListener("mouseover", showLabelOnHover.bind(this, choiceNumber));
        choices[i].addEventListener("mouseout", hideLabelOnHover.bind(this, choiceNumber));
    }
});
 

Thanks for sharing the code! But unfortunately I can’t see any labels showing up in preview upon putting the codes there. 

May I also ask how to show the labels based on the survey languages? My survey has 3 languages and I would like to show the labels in the respective language.

What are you actually getting preview after this code execution.. can you please share a snip?

This is the screenshot. There’s no label showing up.

This is JS code of the question.

Qualtrics.SurveyEngine.addOnload(function()
{

var labels = {
        1: "Bad",
        2: "Poor",
        3: "Average",
        4: "Good",
        5: "Excellent"
    };

    function showLabelOnHover(choiceNumber) {
        var choice = document.querySelector('[id^="' + this.questionId + '"][data-choice="' + choiceNumber + '"]');
        var label = document.createElement("div");
        label.innerHTML = labels[choiceNumber];
        label.classList.add("star-label");
        choice.appendChild(label);
    }

    function hideLabelOnHover(choiceNumber) {
        var choice = document.querySelector('[id^="' + this.questionId + '"][data-choice="' + choiceNumber + '"]');
        var label = choice.querySelector(".star-label");
        if (label) {
            choice.removeChild(label);
        }
    }

    var choices = document.querySelectorAll('[id^="' + this.questionId + '"][data-choice]');
    for (var i = 0; i < choices.length; i++) {
        var choiceNumber = parseInt(choices[i].getAttribute("data-choice"));
        choices[i].addEventListener("mouseover", showLabelOnHover.bind(this, choiceNumber));
        choices[i].addEventListener("mouseout", hideLabelOnHover.bind(this, choiceNumber));
    }
});

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

});

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

});

Maybe you cab do this by explicitly define the label type in the specific language for the survey.The language selection is determined by the value of an embedded data field named "language." You need to ensure that your survey captures the respondent's language selection and stores it in the "language" embedded data field.

you can use the following JavaScript code to set the "language" embedded data based on the survey language:

Qualtrics.SurveyEngine.addOnload(function() {
    var language = Qualtrics.SurveyEngine.getSurveyLanguage();
    Qualtrics.SurveyEngine.setEmbeddedData("language", language);
});
 

This is the screenshot. There’s no label showing up.

 

Hover over the stars

I’ve tried to hover over the stars but no labels showing up. Thanks very much for your sharing on code though. I’ve tried to use the click and show approach with code below and it works for me.

{

jQuery('.StarsEventWatcher').on('touchend click',function(){

jQuery(".SatisfactionIndex").remove();
if($$('.ResultsInput')[0].value == 1){
$(this).parentNode.appendChild(QBuilder('div',{},'Bad'));
}else if($$('.ResultsInput')[0].value == 2){
$(this).parentNode.appendChild(QBuilder('div',{},'Poor'));
}if($$('.ResultsInput')[0].value == 3){
$(this).parentNode.appendChild(QBuilder('div',{},'Average'));
}if($$('.ResultsInput')[0].value == 4){
$(this).parentNode.appendChild(QBuilder('div',{},'Good'));
}if($$('.ResultsInput')[0].value == 5){
$(this).parentNode.appendChild(QBuilder('div',{},'Excellent'));
}
jQuery(".StarsContainer div:last").addClass("SatisfactionIndex");
jQuery(".SatisfactionIndex").css("font-size", "14px");
jQuery(".SatisfactionIndex").css("text-align", "center");
jQuery(".SatisfactionIndex").css("color", "rgb(153, 153, 153)");
    
});
    
});

Regarding the language, I used “SelectedLanguage” to control the survey language based on URL like below.

If the “SelectedLanguage” is either “ZH-T” or “ZH-S”, I would like to set the labels as below:

        1: "非常差",
        2: "差",
        3: "普通",
        4: "好",
        5: "非常好"

May I know how should the code be looked like?

That’s a good approach too… surely will help others too then

Regarding the language, I used “SelectedLanguage” to control the survey language based on URL like below.

If the “SelectedLanguage” is either “ZH-T” or “ZH-S”, I would like to set the labels as below:

        1: "非常差",
        2: "差",
        3: "普通",
        4: "好",
        5: "非常好"

May I know how should the code be looked like?

 

Seems fine… thanks for the knowledgeable inputs 

Regarding the language, I used “SelectedLanguage” to control the survey language based on URL like below.

If the “SelectedLanguage” is either “ZH-T” or “ZH-S”, I would like to set the labels as below:

        1: "非常差",
        2: "差",
        3: "普通",
        4: "好",
        5: "非常好"

May I know how should the code be looked like?

 

Seems fine… thanks for the knowledgeable inputs 

May I know how to set the JS code to control the label wordings based on “SelectedLanguage”?

i pasted the code below for the label language but no labels showing up no matter what language. May I know how to update the code to make it work?

{
    var language = Qualtrics.SurveyEngine.getSurveyLanguage();
    Qualtrics.SurveyEngine.setEmbeddedData("language", language);

    jQuery('.StarsEventWatcher').on('touchend click', function () {
        jQuery(".SatisfactionIndex").remove();
        var satisfactionText = '';

        var selectedValue = $$('.ResultsInput')[0].value;
        if (selectedValue == 1) {
            satisfactionText = (language === "ZH-T" || language === "ZH-S") ? '非常差' : 'Bad';
        } else if (selectedValue == 2) {
            satisfactionText = (language === "ZH-T" || language === "ZH-S") ? '差' : 'Poor';
        } else if (selectedValue == 3) {
            satisfactionText = (language === "ZH-T" || language === "ZH-S") ? '一般' : 'Average';
        } else if (selectedValue == 4) {
            satisfactionText = (language === "ZH-T" || language === "ZH-S") ? '好' : 'Good';
        } else if (selectedValue == 5) {
            satisfactionText = (language === "ZH-T" || language === "ZH-S") ? '非常好' : 'Excellent';
        }

        jQuery(this).parent().append(QBuilder('div', {}, satisfactionText));
        jQuery(".StarsContainer div:last").addClass("SatisfactionIndex");
        jQuery(".SatisfactionIndex").css("font-size", "14px");
        jQuery(".SatisfactionIndex").css("text-align", "center");
        jQuery(".SatisfactionIndex").css("color", "rgb(153, 153, 153)");

    });

});