Making tooltips disappear again... | XM Community
Skip to main content

Hi All
I have implemented (mobile-friendly) tooltips using the following: Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis (replacing $ with jQuery everywhere in the java-script). It appears to work perfectly when I'm in builder view, however when I preview my survey, nothing I do makes the tooltip disappear again. The result is that I have multiple tooltips all overlapping each other for one question. Even when I skip to the next page they are still there!
This is exactly what I have in the java-script for the question:
~~~~~~~~~~~~~~~~~~~~~~
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery( function()
{
  var targets = jQuery( 'yrel~=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();
    $( 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*/

});
~~~~~~~~~~~~~~~~~~~~~~~~
I'm new to Javascript and CSS (and relatively new to Qualtrics), can anybody help me out here otherwise I'm going to have to re-word all my likert questions, which I would really like to avoid as it will make them unnecessarily long!

Many thanks
Linz

Issue resolved... the problem was with this part of the code:
init_tooltip();
    $( window ).resize( init_tooltip );
Because I overlooked to replace $ with jQuery in this one section of code, it obviously resulted in everything in the code from this point being ignored. Now that I've corrected that, it works as expected!


Leave a Reply