qTip pop ups come in from top left of screen (on first load)

Posted by franko75 on Stack Overflow See other posts from Stack Overflow or by franko75
Published on 2010-05-08T08:02:18Z Indexed on 2010/05/08 8:08 UTC
Read the original article Hit count: 239

Filed under:
|
|

Hi, not sure if i'm set things up incorrectly - I don't seem to see anyone else with this problem, but my qTip popups (all ajax loaded content) are loading quite erratically, in that they are often animating in from off screen before appearing in the correct position. Is there a simple solution to this which I may have missed? Thanks again for your help.

HTML markup:

    <span class="formInfo">
   <a href="http://localhost/httpdocs/index.php/help/kc_dob" class="jTip" name="" id="dob_help">?</a>
</span>

qTip initialisation..

    //set up for qtip
   function initQtip()
   {
         $('a.jTip').each(function()
            {
               $(this).qtip(
               {
                 content: {
                     // Set the text to an image HTML string with the correct src URL to the loading image you want to use
                     text: '<img src="/media/images/wait.gif" alt="Loading..." />',
                     url: $(this).attr('href') // Use the rel attribute of each element for the url to load
                  },
                  position: {
                     adjust: {
                           screen: true // Keep the tooltip on-screen at all times
                     }
                  },
                  show: { 
                  when: 'click', 
                     solo: true // Only show one tooltip at a time
                  },
                  hide: 'unfocus',
                  style: {
                     tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
                     border: {
                           width: 10,
                           radius: 10
                     },
                  width: {
                     min: 200, 
                     max: 500
                  },
                     name: 'light' // Use the default light style
                  }
               });
            //prevent default event on click
            }).bind('click', function(event){ event.preventDefault(); return false; });
      }

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-plugins