You will need to add click function. First add a text in span class and hide it initially and once when you click on it show it and then again on clicking hide it.

so it would be like this;
var counter=0;
jQuery('#id').click('on', function(){
jQuery('#id').show()
})
;

---

How do you add the text in the span class? I tried adding another table with the classes for each choice and then adding them but am not sure what you mean. Also what does the counter variable do?
jQuery("div.QuestionText").hide();
var theTable = document.getElementById("ChoiceStructure").cloneNode(true);
var newRow = document.getElementById("info").cloneNode(true);
theTable.appendChild(newRow.cloneNode(true));

---

Hi @jrc3,
I am not sure, but it seems you are more looking for a tooltip solution than for an on-click solution.
In other words, the additional text should be shown when respondents hover over the choice the additional information should be shown, right?

Best regards
Rudi

---

No, hover tooltips are not easily accessible on mobile. Mouse over would be fine on the desktop. When using multiple mobile the choice go off screen.
I would like a person on mobile to tap on the choice, then see the text to confirm they are correct, then tap the next arrow at the bottom.
If they choose a different option it should close ones that are open and then show the next one.
I think grahulp5's idea is a start but could use some help with the correct js
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#"+this.questionId+" input[type='radio']:first").after("

");
jQuery("#"+this.questionId+" inpututype='radio']:eq(1)").after("");
jQuery("#"+this.questionId+" inpututype='radio']:eq(2)").after("");
jQuery("#"+this.questionId+" inputntype='radio']:eq(3)").after("");
jQuery("#"+this.questionId+" input+type='radio']:last").after("");
jQuery('.info').hide();
});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery('SingleAnswer').click(function() {
jQuery('.info').hide();
jQuery('#id' +$($this.questionId).split('-').slice(1))).show() 
});
});

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

});

I am just not familiar with qualtrics or js and could use some help.

---

You can use JS to do mobile friendly tooltips - on a desktop they show on hover and on mobile they show with a tap. Do an Internet search on "responsive tooltips".

---

jrc3 This doc has all the code you need to add the hover text that TomG referenced.

---

https://community.qualtrics.com/XMcommunity/discussion/comment/45538#Comment_45538I am not sure that this answers the question exactly as requested and is much more complicated, but is close enough to probably work so I marked this question as answered. I would prefer not to edit the HTML on each question as it is easily deleted. Thank you for this code snippet.
Since Google Docs might go away and is not searchable in this community I am quoting it here for future people searching for tooltips, descriptions, popup, mouseover, or additional question text:

Add to Survey theme CSS

#tooltip {
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
}
/* triangle decoration */
#tooltip:after  { 
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #111;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}
#tooltip.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #111;
    top: -20px;
    bottom: auto;
}
#tooltip.left:after {
    left: 10px;
    margin: 0;
}
#tooltip.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

Add to EACH Question JavaScript

Qualtrics.SurveyEngine.addOnload(function () {
    jQuery(function () {
        var targets = jQuery("jrel~=tooltip]"),
            target = false,
            tooltip = false,
            title = false;

        targets.bind("mouseenter", function () {
            target = jQuery(this);
            tip = target.attr("title");
            tooltip = jQuery('');

            if (!tip || tip == "") return false;

            target.removeAttr("title");
            tooltip.css("opacity", 0).html(tip).appendTo("body");

            var init_tooltip = function () {
                if (jQuery(window).width() < tooltip.outerWidth() * 1.5) tooltip.css("max-width", jQuery(window).width() / 2);
                else tooltip.css("max-width", 340);
                var pos_left = target.offset().left + target.outerWidth() / 2 - tooltip.outerWidth() / 2,
                    pos_top = target.offset().top - tooltip.outerHeight() - 20;
                if (pos_left < 0) {
                    pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                    tooltip.addClass("left");
                } else tooltip.removeClass("left");
                if (pos_left + tooltip.outerWidth() > jQuery(window).width()) {
                    pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                    tooltip.addClass("right");
                } else tooltip.removeClass("right");
                if (pos_top < 0) {
                    var pos_top = target.offset().top + target.outerHeight();
                    tooltip.addClass("top");
                } else tooltip.removeClass("top");
                tooltip.css({ left: pos_left, top: pos_top }).animate({ top: "+=10", opacity: 1 }, 50);
            };
            init_tooltip();
            jQuery(window).resize(init_tooltip);

            var remove_tooltip = function () {
                tooltip.animate({ top: "-=10", opacity: 0 }, 50, function () {
                    jQuery(this).remove();
                });
                target.attr("title", tip);
            };
            target.bind("mouseleave", remove_tooltip);
            tooltip.bind("click", remove_tooltip);
        });
    });
});

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*/
});

Rich text edit for each choice and add to HTML code

Displayed Text
NOTE: I have not tested this, I will try it out and report back.

---

Tested this today and it does NOT work.

---

Double-check your JavaScript. Here is a sample of what it does. I've also attached the qsf.

Sample.qsf

---

jrc3 My apologies for not mentioning this earlier, but a limitation to this code is that you can only use it once per screen. If you have multiple questions using this code you need to separate them with page breaks.

---