qTips flowing off edge of screen

[Wogan]

If a qTip is generated near the edge of the page, it will extend the boundaries (stretch the page), and some of the contents may be hidden.

Isn't there a way to have it detect whether or not it will flow off the page, and "snap" to the outermost boundary automatically?

[Craig]

You could try turning on screen adjustment, which will stop it going off-screen if possible:

JS Code

$('.selector').qtip({ position: { adjust: { screen: true } } });

[elamberdor]

Hi!

Just getting familiar with jquery plugins....

Has anyone tried this yet? Does it work well? Where does it work?
Love to hear feedback!
=)

[elamberdor]

So in the jquerey.qtip.min.js, I've changed the

JS Code

adjust:{x:0,y:0,screen:false}

to read

JS Code

adjust:{x:0,y:0,screen:true}

and for the separate popup.js,whose functions section looks like this:

JS Code

$( function(){
      var popups = $("."+CSU.popup.baseClass);
      popups.each( function(i,v){ $(this).qtip({
         content: { url: $(this).attr("href") },
            position: {
               corner: {
                  target: 'bottomRight',
                  tooltip: 'topLeft'    }
                  },
            style: { width: 300, name: 'cream', tip: 'topLeft'  }
      }); } );
    }   );

I've tried to add the adjust in here too:

JS Code

position: {
 
adjust: { screen: true },
 
                  corner: {
                  target: 'bottomRight',
                  tooltip: 'topLeft'    }
                  },

And getting the error in greasemonkey for line 148 "self.options undefined"

Am I completely off track??
Any direction would be awesome!

[Craig]

That should be ok at a glance, what file is the greasmonkey error occuring in? The qTip file or yours?

[elamberdor]

Thanks for the fast reply!!

Yup, no error when I load the html page, but when I try to rollover a link. None of the boxes display,but you can tell that it is trying to locate (GET) all those html popups we've created.

Should I also be adding something to the var of the popup.js as something is undefined? I am using 1.0.0-beta3, and tried 1.0.0-beta4 with equal non-success. I really appreciate the feedback!

[Craig]

Do you get the same error when using beta4 by any chance? Or is it a different one? If so could you post the line number for beta4 so I can track down the offending code.

[elamberdor]

Yes the same no-show problem, but Greasemonkey doesn't actually show a specific error with beta4 I'm sorry, only letting you know that it 'GOT' the html files, so progress?

On beta4 trial now I am getting some popups working, at random. And they are adjusting position from the sides of the screen nicely. (yay!) FYI:I have 60+ tooltips for this large diagram

Exact same code on those links as the ones not functioning, and very random. I had this issue with beta3, in that in order to get all links working I had to copy and paste working links on the page and rename, I know myself it shouldn't need that with exact code, but it made it work. I will copy and paste and see how it goes, thank you again for the fast response and I hope this helps with debugging!

[elamberdor]

Update:
Checked your documentation page again, have placed <script> tags near </body> rather than head, the random speed issues were attributed to using jquery 1.2.6, have tested 1.3.2, with beta4 qtip, and is now WORKING in IE6, 7 & Firefox 3.

(*small dance*)

Thanks again for the help!!!

[Craig]

Glad to know you got it all sorted elamberdor! jQuery 1.3 is a great update and I'm glad to see you updated! Sorts a lot of the problems when dealing with large amounts of qTip's on the page, which is why I'm planning on stopping 1.2 support in post-1.0 releases.