[Resolvido] Tooltip com requisição $.post

[SpykerGM 0]

$(document).ready(function(){
var cont = '0';
$(".item").hover(function(e){
	item_id = $(this).attr('rel');
	$.post("tooltip.php",{id_item:item_id},
	function(data){
		cont = data;
	});
	$("body").append('<div class="tooltip">'+cont+'</div>');
	$(".tooltip").fadeIn("fast");
	$(".tooltip").css({
		top: e.pageY - 40,
		left: e.pageX + 20
	});
},function(){
	$(".tooltip").remove();
}).mousemove(function(e){
	$(".tooltip").css({
		top: e.pageY - 40,
		left: e.pageX + 20
	});
});

 

Esta é a minha toolttip, ta tudo funcionando bem menos o conteudo que é apresentdo. O conteudo pushado pela requisição nunca é "rapido" o sufeciente,não mostrando o que quero quando passa a primeira vez com o mouse, só na 2ª.

 

Alguem tem uma solução ai?

[Lucas Guima 164]

Tenta trocar $.post por $.ajax e setar a propriedade async como false.

 

Como a requisição é assíncrona, ele continua o código e seta sua variável independente da resposta. Com a alternativa que apontei, você força o aguardo do retorno.

[SpykerGM 0]

$(document).ready(function(){
var cont = '0';
$(".item").hover(function(e){
	item_id = $(this).attr('rel');
	$.ajax({
		type:"POST",
		url:"tooltip.php",
		data:{id_item:item_id},
		async:false,
		success:function(data1){
			cont = data1;
		}
	});
	$("body").delay(200).append('<div class="tooltip">'+cont+'</div>');
	$(".tooltip").fadeIn("fast");
	$(".tooltip").css({
		top: e.pageY - 40,
		left: e.pageX + 20
	});
},function(){
	$(".tooltip").remove();
}).mousemove(function(e){
	$(".tooltip").css({
		top: e.pageY - 40,
		left: e.pageX + 20
	});
});
});

 

Funcionou muito bem, valew e fica ai uma boa maneira de fazer um tooltip com chamada ajax.

Obs: para funcionar trá de criar seu estilo pata o .tooltip

[JCMais 75]

Seria melhor deixar a requisição assincrona e apenas mover o código que exibe o tooltip para dentro do callback, também tomei a liberdade de efetuar algumas melhorias:

$(document).ready(function(){
   var cont = '0',
       $tooltip = $( '<div class="tooltip">' ).appendTo( 'body' ); //você não precisa criar o elemento do tooltip toda vez que for exibi-lo

   $( '.item' ).hover( function( e ) {

       var item_id = $( this ).attr( 'rel' );

       $.post( 'tooltip.php',{ id_item :i tem_id }, function( data ) {
           cont = data;

           $tooltip.text( cont ).fadeIn( 'fast' ).css({
               top: e.pageY - 40,
               left:e.pageX + 20
           });

       });
   }, function() {

       $tooltip.hide();

   }).mousemove( function( e ){

       $tooltip.css({
           top: e.pageY - 40,
           left: e.pageX + 20
       });
   });
});