Qtip position question - Please help

[win]

Hi Guys,

Thank you so much for the wonderful tooltip plugin, and thank you for having a look at my question.
I need to build my site to have my tooltips in different sizes, they must float both left (for some tips) and right for others. Similar to this page:
http://www.tiffany.com/Shopping/Category...cat=148210

On my site, http://sd.buyxonline.com/find-your-diamond
I thought I had gotten it right. However, when I view my tips on different screens the position absolute comes back to haunt me. Can you please help me to align the tips properly next to the target so that it would work on different screen resolutions?

I am using this code:

JS Code

//tooltip popup on find-your-diamond category begin
jQuery(document).ready(function () {
    // Notice the use of the each() method to acquire access to each elements attributes
   jQuery('.category').each(function()
   {
      jQuery(this).qtip({
         content:
            {
                text : jQuery(this).next('div.popup-box')
            },
         position: {
         corner: {
                 target: 'bottomLeft',
                 tooltip: 'bottomLeft'
              },
         adjust: {screen: true}
           },
         style: {
                  border: {
                     width: 3,
                     color: '#6699CC'
                  },
                  classes: {
                      content: 'tooltip',
                      tooltip: jQuery(this).attr('rel')
                  },
                  width: {min: 0}
               },
         hide: {when: 'mouseout', fixed: true}
      });
   });
 
});
//tooltip popup on find-your-diamond category end

My CSS Looks like this:

JS Code

/* Categories navigation */
.category-container { }
.category-container li.category { margin:2px; float:left; border: 1px solid #ccc; width:140px; height:140px; }
.category-container li.ThumbBig { width:286px; height: 286px; }
 
.category-container li.category img { padding:35px; }
.category-container li.ThumbBig img { padding:70px; }
 
.category-container li.category a.cat-name { position:relative; color:#797d80; text-transform: uppercase; font-size:11px; /*font-weight:bold; left:30px;*/ position:relative; text-decoration:none; text-transform:uppercase; top:-30px; }
.category-container li.ThumbBig a.cat-name { position:relative; color:#797d80; text-transform: uppercase; font-size:11px; /*font-weight:bold; left:85px;*/ position:relative; text-decoration:none; text-transform:uppercase; top:-60px; }
 
.category-container li.item-8, .category-container li.item-9, .category-container li.item-10, .category-container li.item-11 { position: relative; top: -146px; }
 
/* Categories Tooltip */
.tooltip .popup-box { overflow:hidden; height: 126px !important; width:266px !important; }
.tooltip .cat-popup-big { height:273px !important; width:411px !important; }
.tooltip .popup-box .cat-popup-image { float:left !important; }
.tooltip .popup-box .cat-popup-text { float:right !important; width:40%; font-size:9px; }
 
/* Switch Directions */
.tooltip .popup-item-2 {}
.tooltip .popup-item-2 .cat-popup-image { float:right !important; }
.tooltip .popup-item-2 .cat-popup-text { float:left !important; width:40%; font-size:9px; }
 
.tooltip .popup-item-3 {}
.tooltip .popup-item-3 .cat-popup-image { float:right !important; }
.tooltip .popup-item-3 .cat-popup-text { float:left !important; width:40%; font-size:9px; }
 
.tooltip .popup-item-4 {}
.tooltip .popup-item-4 .cat-popup-image { float:right !important; }
.tooltip .popup-item-4 .cat-popup-text { float:left !important; width:40%; font-size:9px; }
 
.tooltip .popup-item-6 {}
.tooltip .popup-item-6 .cat-popup-image { float:right !important; }
.tooltip .popup-item-6 .cat-popup-text { float:left !important; width:40%; font-size:9px; }
 
.tooltip .popup-item-7 {}
.tooltip .popup-item-7 .cat-popup-image { float:right !important; }
.tooltip .popup-item-7 .cat-popup-text { float:left !important; width:40%; font-size:9px; }
 
.tooltip .popup-item-11 {}
.tooltip .popup-item-11 .cat-popup-image { float:right !important; }
.tooltip .popup-item-11 .cat-popup-text { float:left !important; width:40%; font-size:9px; }
 
/* Swing Tooltip Left */
div.tip-2 { left:436px !important; }
div.tip-4 { left:727px !important; }
div.tip-3 { left:583px !important; }
div.tip-6 { left:436px !important; }
div.tip-7 { left:582px !important; }
div.tip-11 { left:436px !important; }

Please guys, I would be over the moon if I can make this work. Thank you so very much for any assistance, and Qtip absolutely Rocks Craig!

[Craig]

Hmm win, have you tried disabling the screen adjustment?

[win]

Hi Craig, Thank you for your reply
I have changed the JS to remove the screen adjustment and the code now looks like:

JS Code

//tooltip popup on find-your-diamond category begin
jQuery(document).ready(function () {
    // Notice the use of the each() method to acquire access to each elements attributes
   jQuery('.category').each(function()
   {
      jQuery(this).qtip({
         content:
            {
                text : jQuery(this).next('div.popup-box')
            },
         position: {
         corner: {
                 target: 'bottomLeft',
                 tooltip: 'bottomLeft'
              },
         adjust: { 
                screen: false,
                scroll: false,
                resize: false
                }
              },
         style: {
                  border: {
                     width: 3,
                     color: '#6699CC'
                  },
                  classes: {
                      content: 'tooltip',
                      tooltip: jQuery(this).attr('rel')
                  },
                  width: {min: 0}
               },
         hide: {when: 'mouseout', fixed: true}
      });
   });
 
});
//tooltip popup on find-your-diamond category end

This did make some change with regards to the alignment of my tooltip. So I have adjusted my CSS to the following:

JS Code

/* Swing Tooltip Left */
 
div.tip-2 { position:absolute; left:487px !important; }
div.tip-4 { position:absolute; left:778px !important; }
div.tip-3 { position:absolute; left:633px !important; }
div.tip-6 { position:absolute; left:487px !important; }
div.tip-7 { position:absolute; left:633px !important; }
div.tip-11 { position:absolute; left:487px !important; }

This looks fine on my screen, but once I resize my screen resolution the tip no longer lines up with the target.
One thing, is If I do not add the CSS and I just leave it vanilla, then the tips line up with the left border of the target, and this would work fine, except that some of those tips tip-2, tip-4, tip-3, tip-6, tip-7, tip-11 need to swing left, and so they need to then line up with the RIGHT border of the target.

Is what I am trying to achieve even doable with Qtip? It's so powerful that I immediately thought I could do it,
Any other advice you could offer me?

Thank you so much man, and I hope you are having a wonderful Friday,

Winston
http://www.3am.co.za

(26th August 13:34)Craig Wrote:  Hmm win, have you tried disabling the screen adjustment?

[Craig]

Hmmm, might I suggest moving to the new 2.0 releases? The screen adjustment has been much improved which might help you solve this problem.

You can grab it here: http://github.com/craga89/qtip/tree/master/dist/