How to avoid page scroll when using qtip?

Question

I'm a big fan of qTip, but I was wondering if there was a way to use the modal window without having your page scroll to the top.

Have looked around but haven't found anything yet. Is this possible?

Answer 1

Yes it is possible! You need to set the adjust field

adjust : {
    screen : true
}

where you specify the position of the tooltip

position : {
    my : 'right center',
    at : 'left center',
    adjust : {
        screen : true
    }
}

I am not sure if that is a feature of qTip1 but I used in in qtip2. The tooltip is adjusted automatically to avoid overflow and scrolling

Answer 2

You should set the target of the tip to be the window as in the qTip dialog demo:

 position: {
      my: 'center',
      at: 'center',
      target: $(window)
 }

You may also optionally apply fixed positioning to the tip via CSS to prevent scrolling of the modal dialog altogether. qTip automatically accommodates for all browser issues with fixed positioning (cough IE cough). For example:

 .ui-tooltip {
      position: fixed;
 }

Or, if you have your own classnames:

 .ui-tooltip-myClassName {
      position: fixed;
 }

In regards to the other answer provided, note that qTip2 has a different format for viewport adjustment (it is no longer position.adjust.screen as it was in qTip1) and specifically allows you to define what containing element should be used for adjustment:

position: {
      viewport: $(window)
}

Or, for a containing element instead of the window/screen:

position: {
      viewport: $('#myElement')
}

You can also now define how the adjustment is made with the "method" parameter and can constrain it to only adjust on a single axis by specifying 'none' for the other. The default/legacy method is 'flip,' but you can also specify 'shift' which only moves the tip enough to fit in the viewport. The format is:

position: {
      viewport: $(window),
      adjust: {
           method: '<method>'
      }
}

Or,

position: {
      viewport: $(window),
      adjust: {
           method: '<horizontalMethod> <verticalMethod>'
      }
}

For example:

position: {
      viewport: $(window),
      adjust: {
           method: 'shift'
      }
}


position: {
      viewport: $(window),
      adjust: {
           // Only adjust tip position on the horizontal axis
           method: 'shift none'
      }
}