Aprenda como se faz:..."Tooltip ncom efeito JQuery"
Autor: Edilene brandao da silva | Publicado: 2010-12-05T17:13:00-08:00

&nbsp;» Este modelo de Menu, há tempos, que procuro, e agora a querida Elke, de
&nbsp;http://templateseacessorios.blogspot.com/2010/12/tooltip-ncom-efeito-jquery.html

ensina no post a seguir de autoria dela...(ELKE DE BARROS)
&nbsp;:::

"&nbsp;&nbsp;&nbsp; Não se esqueça de antes  de começar salvar uma cópia de seu template, caso não dê certo, é só  reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de  2010. Para reinstalar o antigo template clique AQUI "&nbsp;:::

 Tooltip ncom efeito JQuery "&nbsp; Coloque os links de seu blog com efeito tootip, é bem simples. "

 


Vá até o HTML de  seu blog e antes de:
   ]]&gt;&lt;/b:skin&gt;
Cole  código abaixo:

  .tip {
&nbsp;&nbsp;&nbsp; color: #fff;
&nbsp;&nbsp;&nbsp; background:#716D90;
&nbsp;&nbsp;&nbsp; display:none; /*--Hides by default--*/
&nbsp;&nbsp;&nbsp; padding:10px;
&nbsp;&nbsp;&nbsp; position:absolute;&nbsp;&nbsp;&nbsp; z-index:1000;
&nbsp;&nbsp;&nbsp; -webkit-border-radius: 3px;
&nbsp;&nbsp;&nbsp; -moz-border-radius: 3px;
&nbsp;&nbsp;&nbsp; border-radius: 3px;
}  

..."&nbsp; depois de"

 ]]&gt;&lt;/b:skin&gt;
Cole o próximo código.


 &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[$(document).ready(function() {&nbsp;&nbsp;&nbsp; //Tooltips&nbsp;&nbsp;&nbsp; $(".tip_trigger").hover(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tip = $(this).find('.tip');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tip.show(); //Show tooltip&nbsp;&nbsp;&nbsp; }, function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tip.hide(); //Hide tooltip&nbsp;&nbsp;&nbsp; }).mousemove(function(e) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var mousex = e.pageX + 20; //Get X coodrinates&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var mousey = e.pageY + 20; //Get Y coordinates&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tipWidth = tip.width(); //Find width of tooltip&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tipHeight = tip.height(); //Find height of tooltip&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Distance of element from the right edge of viewport&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tipVisX = $(window).width() - (mousex + tipWidth);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Distance of element from the bottom of viewport&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tipVisY = $(window).height() - (mousey + tipHeight);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if ( tipVisX &lt; 20 ) { //If tooltip exceeds the X coordinate of viewport&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mousex = e.pageX - tipWidth - 20;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } if ( tipVisY &lt; 20 ) { //If tooltip exceeds the Y coordinate of viewport&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mousey = e.pageY - tipHeight - 20;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Absolute position the tooltip according to mouse position&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tip.css({&nbsp; top: mousey, left: mousex });&nbsp;&nbsp;&nbsp; });});//]]&gt;&lt;/script&gt;



Pronto, agora sempre que quiser&nbsp; o efeito tooltip em algum link, vc dederá colocar esse próximo código:


 &lt;a class='tip_trigger' href='AQUI O ENDEREÇO DO LINK'&gt;LINK AQUI&lt;span class='tip'&gt;INSCRIÇÃO DO QUE APARECERÁ NO TOOLTIP&lt;/span&gt;&lt;/a&gt;








http://lllmenu.blogspot.com