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?

Tellford

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

Environ

Thanks for the question, I actually went for Facebox (another jQuery modal window plugin). It's much simpler but did the trick for me. Thanks for the reply! – Tellford

ok, however my answer solves the question, so you should accept it. – Environ

It is important to the StackOverflow community that you mark answers as answered, it helps people looking for the right answer and it helps the person who answered it gain respect. – Expectation

Works good. also, when you scroll down, and open modal dialog, it renders into center with respect to your scroll position too. - Thanks – Bovid

@StenVandenBergh my answer actually answers the question so you may accept it to support other users and their problems – Environ

Seems to use viewport width at the time when the Qtip is initialized, not when qtips are shown. So if you shrink browser width after initializing Qtip with this option, then it still draws Qtips out of viewport. – Volteface

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'
      }
}

Norvol