Using the API's updatePosition

[SojournerWest]

Hello everybody,

I'm using qtips on a page that changes elements based on user input to a field. I'm having problems making the qtips change where they're targeted. I'm trying to call the updatePosition method from within the function that handles changes for the input box so that the qtips target the proper side of the elements.

Here's the call I make in the function

JS Code

$('.qtip').qtip('api').updatePosition();

And here's the js for qtip: (Please excuse the commented out stuff everywhere)

JS Code

$('input.field, td.field>*').each(function(){      
         $parent = $(this.parentNode)
         parentClass = $parent.attr('class')
         $child = $(this.childNode)
         childClass = $child.attr('class')
         childID = $child.attr('id')
         currentID = $(this).attr('id')
         currentID = currentID.substring(0, currentID.length - 1 )
         target = currentID.replace('-','')
         target = '#' + target + '2'
 
         $(this).qtip({
            position:{
               adjust: { //Make the tooltip avoid going outside the window due to browser resizing
                     resize: true, 
                  //   screen: true, //Makes the qtips act strangely when they are fairly large
                     },
               corner: {
                     target: 'rightMiddle',
                     tooltip: 'leftMiddle',
                     },
               target: $(target),
            //   target: $(this),
                   },
            style:{ //Style the qtip to look like the page
                 color: 'black',
                 textAlign: 'center',
                  title: { color: 'white', background: '#707070'},
                 width: { max: 340 },
                 //This is a good width because it makes the far edge of the tooltip about 1024 pixels from the left side of the screen, making it 1024x768 friendly
                 border:{ 
                      width: 6, 
                      color: '#a2ddff'
                      },
                 tip: { //Options for the tail
                     corner: 'leftMiddle', 
                     color: '#a2ddff',
                     size: { x: 20, y : 15 }
                     },
                  },
            show:{ //Show only one qtip, and show it when somebody clicks 
                 when: { event: 'click' }, 
                 solo: true ,
                 effect:{ 
                      length: 25, 
                      type:'grow' 
                      },
                },
            hide: 'false', //This makes the qtips stick around a bit more, and makes them less annoying
 
            /*    { //Hide when a click is made outside the qtip
                 when: { event: 'unfocus'} ,
                 effect:{ 
                      length: 150, 
                      },
                },  */
            content:{
                  prerender: false,//This kills pageload times if enabled
                  text: 'Parent Class: ' + parentClass + ' This Class: ' + $(this).attr('class') + ' This ID: ' + $(this).attr('id') + ' Child Class: ' + childClass + ' ChildID ' + childID + ' Target: '+ target + ' Number!: ' + n + ' Other Number, should be the same ' + parseInt($('#id_residues').val()),
               //   url: '{{SITE_ROOT}}search/qtiphelp/',
               //   method: 'get',
               //   data: { id: parentClass + '_help' },
                  title:  {
                        text: '<a href="{{SITE_ROOT}}search/help/#sea">Need Some More Help?</a> ',
                        button: 'Close' //Enables a button that closes the qtip
                        }
                  },
            });
         });

Thanks for any help in advance. Also, awesome work Craig, qtip is sweet.

[Craig]

SojournerWest, could you give a bit more detail on what your trying to accomplish? I'm not quite sure I understand what your trying to do. Are you wanting to simply update the position of the tooltips when a specific function is called?

Oh and thank you I can live for two months on a good compliment. ~Mark Twain

[SojournerWest]

Yeah, that's essentially what I'm trying to do. Right now though, I'm getting an error:

JS Code

f(this).data("qtip") is undefined

Which seems to be caused by calling the api ".qtip('api')"

Thanks,

SW

[maximus8891]

SojournerWest Wrote:I'm getting an error:

JS Code

f(this).data("qtip") is undefined

It could mean you are trying to get "api"-object from an element that actually doesn't have a qtip. Also it could signify scope problem.