Responsive tooltips for MaxDiff features that work on mobile devices

commenting for being looped

Hi,

You can do the same but place your javascript in the header and your css in the look & feel css instead of the questions themselves.

https://somsandbox.pdx1.qualtrics.com/jfe/preview/previewId/ba0d2313-9d53-4d20-9aff-6e8c257cfe1c/SV_0VWCHtGvUuCDrFQ?Q_CHL=preview&Q_SurveyVersionID=current

Cool

Hi ​@vgayraud ,

thank you so much!

I tried it but unfortunately it didn’t work...not sure why.

I pasted the following code in the JS header (FYI I also have to hide the back button in a few questions, thus there is also a line of code for this in the beginning):

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
if(!!+"${e://Field/hidePrev}") jQuery("#PreviousButton").hide();

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( '

' );
 
        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 );
    });
});

});
</script>

And I pasted the following code in the custom CSS (under Look and feel):
 

#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;
        }

I took the code from this post.

Do you have any idea why it is not working?

Thanks so much,
Eva

Thank you ​@vgayraud for pointing me in the right direction! I replaced this with 

tooltip = jQuery( '<div id="tooltip"></div>' );

and used the following structure for setting up the labels and tooltip descriptions:

<abbr title="long description shown in tooltip" rel="tooltip">short label</abbr>

 This works perfectly now, thank you again for your help!