Adding hover over for matrix table choice/response

Thanks for that jmborzick! It worked!!!

rca24466 I'm sorry for the late response on this. Here is the link.

RAK Here you go.

RAK
For the CSS, you should copy/paste from the doc into the Style section of Look and Feel.
The section labeled "Script" should be added to the JavaScript section of the question itself.
The "HTML" section needs to be typed into each of your answer choices. You would replace the words "POP UP" with the text you want to appear when you hover. You would replace "CHOICE TEXT" with the actual choice you want to appear without hovering.

There isn't a view HTML, you can paste the code directly into the question option. Qualtrics will know what to do with it.

Yes, this should support mobile.

Hi @juanav ,

Please follow the below steps to hover functionality using above code snippet :
 

<style type="text/css">#tooltip
{
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
}

    #tooltip:after /* triangle decoration */
    {
        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;
        }
</style>

Add above CSS in below HTML tab:
 

Then ,copy the below code in JS of the question:
 

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

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

        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*/

});

And copy the below text in the choices:

<abbr rel="tooltip" title="POP UP">CHOICE TEXT</abbr>

Replace the POPUP with what yo want to be shown on hover.
CHOICE TEXT        will be  replaced what choice option will be show.

For example , I will take  POPUP →  Just Do It!
                                    Choice  Text → NIKE 

Below is the preview:
 

Hope this resolves your query😊!!

Also @qualtrics_nerd - if I wanted to get the same formatting for the hover over the sub-headings in a side-by-side question - as below for ‘own office’, ‘Embassy’ and ‘other’ - how would I need to amend the javascript?

Also @qualtrics_nerd - if I wanted to get the same formatting for the hover over the sub-headings in a side-by-side question - as below for ‘own office’, ‘Embassy’ and ‘other’ - how would I need to amend the javascript?

 

Hi @juanav ,
Keeping everything  else same:

You can implement  the above task as follows:

 

<abbr rel="tooltip" title="write your text here">own office</abbr>

Hope this resolves your query😊!!

Hi @qualtrics_nerd 

Thank you for the helpful instructions.

The hover works perfectly on desktop, but not on mobile. On mobile, the CHOICE TEXT is there but the POPUP content doesn’t display when I tap it. I’m using Incognito in Chrome. 

@jmborzick - do you have any similar magic for MaxDiff questions? You used to be able to just add a simple div title or span title to the attribute description field and it worked great. Now Qualtrics seems to be stripping the HTML out of the attribute fields?  There’s no JavaScript option on the MaxDiff questions. I tried pasting your CSS into the box in the Look and Feel options and using the <abbr rel="tooltip" title="POP UP">CHOICE TEXT</abbr> HTML in your Google doc in the attribute field, but no joy.

Any suggestions? ?