Tooltip

Segue:

http://hunklessons.blogspot.com.br/2014/03/facebook-like-profile-tooltip-with.html

Você precisa ter uma página secundária para receber o ID e retornar o perfil q vc deseja e saber de css para formatar sua exibição!

Download direto: http://www.mediafire.com/download/w3fg64ydbb8e4w3/fb_like_profile_tooltip.rar

Obrigado Domenike.

Más eu tenho um código que eu fiz, porem esqueci de postar e explicar mais detalhadamente como eu quero.

Bom, eu quero que o tooltip funciona com todos os title, ou fazer algum código que da para eu aplicar em uma própria div, img, span, etc...

Olha o código:

jQuery(function(){
	jQuery(".profileokay").hover(function(e){
 jQuery("body").append('<div id="tooltip"><span>'+jQuery(this).attr('alt')+'</span><i class="arrow"></i></div>');
 jQuery("#tooltip").css({
 top : 365,
 left : 635
 }).fadeIn();
	}, function(){
 jQuery("#tooltip").remove();
 jQuery(".profileokay").removeAttr("title");
	});
});

#tooltip {
background-color: #282828;
color: #fff;
padding: 6px 8px;
text-align: left;
white-space: nowrap;
position: absolute;
padding-left: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

font-size: 12px;
line-height: 16px;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
}

border-left: 0;
border-right-color: #282828!important;
left: -8px;
top: 10px;
}

border: 4px solid transparent;
font-size: 0;
height: 0;
line-height: 0;
position: absolute;
width: 0;
}

Eu fiz isso apenas a div perfilokay como faço para todas?

Cada div terá que receber um id, quando você passar o mouse por cima do link, o id é enviado para uma pagina, por exemplo: perfil.php?id=1

O perfil do usuário com o id será retornado.

Olha lá no código!

Aquele código está prontinho, é só dar uma olhada!

Domenike é que eu não posso editar os códigos PHP, não tenho permissão para fazer isso, adicionar um id.

Não tem como eu fazer isso por meio de jQuery?

Obrigado.

Alguém pode me ajudar?

http://iamceege.github.io/tooltipster/

Pode fazer tudo com esse plugin.

Olá,

Deixa eu explicar melhor...

HTML

<img src="http://i.imgur.com/2V1j0wn.png" alt="Perfil verificado" title="Perfil verificado" class="tooltip">

CSS

#tooltip {background-color: #282828;color: #fff;padding: 6px 8px;text-align: left;white-space: nowrap;position: absolute;padding-left: 4px;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;}#tooltip span {font-size: 12px;line-height: 16px;font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;}#tooltip .arrow {border-left: 0;border-right-color: #282828!important;left: -8px;top: 10px;}#tooltip .arrow {border: 4px solid transparent;font-size: 0;height: 0;line-height: 0;position: absolute;width: 0;}

jQuery

jQuery(document).ready(function(){	jQuery(".tooltip").hover(function(e){ jQuery("body").prepend('<div id="tooltip"><span>Perfil verificado</span><i class="arrow"></i></div>');	}, function(e){ jQuery("#tooltip").remove();	});});

Ai estão os códigos, porem quando a página repete o HTML ele aparece nós dois então ele repete o tooltip, e quando eu tiro o mouse ele remove só do primeiro e o segundo fica. Como que eu posso arrumar isso?

Use classe ao invés de ID.

Nossa amigo uma coisa tão simples... estou sorrindo agora kkkkk

Deu certo obrigado. Más porem tipo quando passo o mouse na primeira aparece também na segunda e na terceira, tem como eu passar o mouse na primeira e ficar o tooltip só na primeira segundo segundo e assim em diante? Como posso fazer isso?

E mais uma vez obrigado

Estranho... não deveria estar acontecendo.

Poste seu código atualizado e não se esqueça de pontuar minha solução :innocent:

Olá,

jQuery(document).ready(function(){	if(jQuery('.pun .user .user-info img[src="http://i.imgur.com/2V1j0wn.png"]').length){ jQuery('.pun .user .user-info img[src="http://i.imgur.com/2V1j0wn.png"]').addClass("tooltips");	};});jQuery(document).ready(function(){	jQuery(".tooltips").hover(function(e){ jQuery(".user-info").prepend('<div class="tooltip"><span>Perfil verificado</span><i class="arrow"></i></div>');	}, function(e){ jQuery(".tooltip").remove();	});});

Claro, irei pontuar sua solução... hahah e obrigado.

Alguém me ajuda a solucionar este problema?