¿Cómo evitar el desplazamiento de la página al usar qtip?

Question

Soy un gran fanático de qTip, pero me preguntaba si había una forma de usar la ventana modal sin tener que desplazar la página hacia la parte superior.

He echado un vistazo pero no he encontrado nada todavía. es posible?

Answer 1

Sí, es posible! Es necesario configurar el campo de ajuste

adjust : { 
    screen : true 
} 

donde se especifica la posición de la información sobre herramientas

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

No estoy seguro de si eso es una característica de qTip1 pero he usado en en qtip2. La descripción se ajusta automáticamente para evitar el desbordamiento y el desplazamiento

Answer 2

Debe fijado el objetivo de la punta para ser la ventana como en el QTIP dialog demo:

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

También se puede aplicar opcionalmente posicionamiento fijo a la punta a través de CSS para evitar el desplazamiento completo del diálogo modal. qTip se adapta automáticamente a todos los problemas del navegador con posicionamiento fijo (tos, tos de IE). Por ejemplo:

.ui-tooltip { 
     position: fixed; 
} 

O, si usted tiene sus propios nombres de las clases:

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

En lo que respecta a la otra respuesta proporcionada, cabe destacar que qTip2 tiene un formato diferente para el ajuste de visualización (no es la posición más larga .adjust.screen como lo fue en qTip1) y en concreto le permite definir qué elemento que contiene se debe utilizar para el ajuste:

position: { 
     viewport: $(window) 
} 

O, para un elemento que contiene en lugar de la ventana/s Creen:

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

Ahora también puede definir cómo el ajuste se realiza con el parámetro "método" y puede limitar sólo a ajustar en un solo eje, indicando 'Ninguno' para el otro. El método predeterminado/heredado es 'flip', pero también puede especificar 'shift', que solo mueve la punta lo suficiente para caber en la ventana gráfica. El formato es:

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

O

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

Por ejemplo:

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


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