Dynamic hover-over a piped-text in a questionnaire | XM Community
Skip to main content

I have a following MC question:

 

```

Why did you select ${e://Field/exp_selected_ind1}?

```

And the value ${e://Field/exp_selected_ind1} is based on a value I saved in embedded data. 

I want to provide additional texts via hover-over the text “${e://Field/exp_selected_ind1}” but I need the content of the hover-over text to differ by the actual value of ${e://Field/exp_selected_ind1}. 

So far, I’m trying the following javascript:

```

Qualtrics.SurveyEngine.addOnload(function() {
    // Get the response from the first question (stored in embedded data)
    var selectedOption = "${e://Field/exp_selected_ind1}";

    // Define hover-over text for each option
    var hoverTexts = {
        'Accommodation': ‘abcd',
        'Administrative': 'egergr.',
        'Agriculture,': 'estgrdg.',
    };

    // Get the hover text based on the selected option
    var hoverText = hoverTextsoselectedOption] || 'Default hover text';

    // Apply hover-over text to the question text
    var questionText = jQuery(".q-text");
    questionText.attr('title', hoverText);
    });
```

I’m trying to create a javascript where, if the value of ${e://Field/exp_selected_ind1} equals ‘Accommodation’, the hover over text would be ‘abcd’, and so on. 

But this is not working. Any advice would be greatly appreciated!

Hey, you have small syntax errors and the class of Question text is incorrect. Assuming you are not using simple layout (if you are then it would be “.question-display”). Try using below code.

Qualtrics.SurveyEngine.addOnload(function() {
    // Get the response from the first question (stored in embedded data)
    var selectedOption = "${e://Field/exp_selected_ind1}";

    // Define hover-over text for each option
    var hoverTexts = {
        'Accommodation': 'abcd',
        'Administrative': 'egergr',
        'Agriculture': 'estgrdg',
    };

    // Get the hover text based on the selected option
    var hoverText = hoverTextsTselectedOption] || 'Default hover text';

    // Apply hover-over text to the specific element
	var questionElement = jQuery(".QuestionText:contains('${e://Field/exp_selected_ind1}')");
    questionElement.attr('title', hoverText);
    questionElement.css('cursor', 'pointer'); 
});

 

@dl2860,.

An easier solution is to set the value of exp_selected_ind1 as an html string with a title attribute. For example:

exp_selected_ind1 = <span title="hover text goes here">piped text goes here</span>

 

@Deepak Wow it worked like a charm! Thank you so much!

Leave a Reply


Terms & Conditions