Posicionamiento una sugerencia en relación a otro div en jQuery

Question

Aquí está mi información sobre herramientas de marcado y CSS:

<div class="tooltip">Click here to like it</div> 

.tooltip { 
    position: absolute; 
    display: none; 
    background: url('images/tooltip.gif') no-repeat; 
    width: 100%; 
    height: 40px; 
    font-size: 0.8em; 
    line-height: 40px; 
    padding: 0px 0px 0px 8px; 
} 

Ahora, tengo un div en mi página llamada #button_container. Me gustaría colocar este .tooltip div 150px a la derecha de ese div a través de JQuery. Entiendo que necesito configurar estos tooltips top y left atributos, pero no estoy seguro de cómo.

Idealmente la información sobre herramientas top atributo debe ser el mismo que #button_container (aunque #button_container no está posicionada absolutamente) y 150 menos de #button_container 's left atributo.

Realmente no sé por dónde empezar con esto, así que cualquier ayuda sería muy apreciada. Gracias.

Answer 1

En primer lugar, un consejo: no hagas lo tuyo en esto. Hay muchos complementos excelentes de jQuery tooltip. Solo usa uno de ellos.

Dejando eso de lado, si quieres seguir esta ruta, hay un par de formas de hacerlo. La ruta de posicionamiento CSS es utilizar relativa + posicionamiento absoluto:

#button_container { position: relative; } 
div.tooltip { position: absolute; top: 20px; right: 20px; } 

Esto requiere la descripción para estar dentro del recipiente de botón. Tiene la ventaja de que la información sobre herramientas se moverá con el resto de los elementos de la página.

La solución más común es usar algo como:

$("#button_container").hover(function(evt) { 
    $("div.tooltip").css({top: evt.pageY + 10, left: evt.pageX + 10}).fadeIn(); 
}, function() { 
    $("div.tooltip").fadeOut(); 
}); 

Básicamente se mueve la información de herramienta en relación con el ratón mientras que más de la región correspondiente.