Tooltip

[First 1]

Olá, Bom dia.

 

Bom, eu queria um tooltip igual ao Facebook.

Exemplo: O perfil de Mark Zuckerberg quando você passa o mouse no selo de perfil verificado aparece o tooltip preciso de um desse. Onde posso arrumar ou até mesmo fazer? Como fazer?

 

https://www.facebook.com/zuck

 

 

Obrigado desde já.

[Domenike 6]

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

[First 1]

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;
}
#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;
}

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

[Domenike 6]

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!

[First 1]

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?

[WictorP 9]

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

Pode fazer tudo com esse plugin.

[First 1]

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?

[Maykel-ctba 233]

Use classe ao invés de ID.

[First 1]

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

[Maykel-ctba 233]

Estranho... não deveria estar acontecendo.

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

[First 1]

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?