Asignar tooltips para enlaces con efectos

Antes de ver este post te recomiendo ver este que se relaciona: Atributo title

Con este truco te vamos a enseñar a crear un tooltip con códigos jquery y al pasar por un enlace o texto, el tooltip se mostrará con un efecto y persiguiendo al cursor, como podemos ver en el laboratorio de T.B..

Tooltip Jquery en tu blog

Vamos a Blogger → Diseño → Edición de HTML y bucamos el siguiente código: ]]></b:skin> y arriba pegamos el siguiente código arriba:

#easyTooltip{
padding:4px 9px;
border:2px solid #2086CA;
background:#fff;
color:#2086CA;
font-family:arial;
}

Ahora vamos a pegar el siguiente código abajo del mismo (]]></b:skin>):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- Comienzo de código Tooltip -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){
var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};
var options=$.extend(defaults,options);
var content;
this.each(function(){
var title=$(this)
.attr("title");
$(this)
.hover(function(e){content=(options.content!="")?options
.content:title;
content=(options.useElement!="")?$("#"+options.useElement)
.html():content;$(this)
.attr("title","");
if(content!=""&&content!=undefined){$("body")
.append("<div id='"+options.tooltipId+"'>"+content+"</div>");
$("#"+options.tooltipId)
.css("position","absolute")
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")
.css("display","none")
.fadeIn("fast")}},function(){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)});$(this)
.mousemove(function(e){$("#"+options.tooltipId)
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")});
if(options.clickRemove){$(this)
.mousedown(function(e){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)
})}})}})(jQuery);
//]]>
</script>
<!-- fin de código de Tooltip -->

Y ahora vamos a aprender cómo hacer un tooltip en un enlace, cada vez que queramos publicar uno. Siempre que quieras publicar un tooltip, debes agregarle a la etiqueta <a> el atributo title y el contenido adentro: title="Contenido del tooltip" y ademas debes agregar el atributo class con el contenido tooltip dentro: class="Tooltip".
El enlace con tooltip se puede añadir en cualquier parte del blog (ya sea en una entrada, gadget o texto en la plantilla).

Código completo

<a href="http://teoriablogger.blogspot.com" id="tooltip" title="Obtiene ayuda para tu blog">Teoría Blogger</a>

Posteado en: Código CSS,Enlace,Entradas,Intermedio,Jquery,Tooltips