How to avoid page scrolling while using qtip?

Question

I'm a big fan of qTip, but I was wondering if there is a way to use a modal window without scrolling up the page.

Look around, but have not found anything yet. Is it possible?

Answer 1

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

adjust : { screen : true } 

where you indicate the position of the tooltip

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

I'm not sure if this is the qTip1 function, but I used it in qtip2. Tooltip is automatically configured to avoid overflow and scrolling

Answer 2

You should set the hint target as a window in the qTip dialog:

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

You can also attach fixed positioning to the tip using CSS to prevent the whole modal dialog from scrolling. qTip automatically supports all browser problems with fixed positioning (coughing cough). For instance:

  .ui-tooltip { position: fixed; } 

Or, if you have your own class names:

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

As for the other answer provided, note that qTip2 has a different format for adjusting the viewport (it is no longer position.adjust.screen, as it was in qTip1) and, in particular, allows you to determine which element should be used for adjustment:

 position: { viewport: $(window) } 

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

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

Now you can also determine how the setting is performed using the "method" parameter and can limit it only to setting on one axis, indicating "no" for the other. The default / legacy method is “flip”, but you can also specify “shift”, which only moves the tip to fit the viewport. Format:

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

Or

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

For instance:

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