Como ya os explique en otro articulo, los tooltips, siempre le dan un toque de animacion a nuestros enlaces, produciendo un agradable efecto visual. Se pueden realizar con CSS3, pero en este caso he utilizado JavaScript (jQuery) con un codigo muy ligero (364 bytes) y 2 imagenes png transparente. Todo esto se lo he aplicado para realizar estos botones azules, que al pasar el cursor sobre ellos, te da la informacion tooltip con animacion y un fondo tipo 'bocadillo' de color amarillo gradiente. Se pueden utilizar individualmente o incluso añadir varios de ellos y asi formar tambien un menu.
Si quieres ponerlo en tu blog o web, primero tienes que ir a la plantilla y pegar el siguiente codigo jQuery/CSS entre las etiquetas <head> y guardar los cambios.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".botonesjquery a").append("<em></em>");
$(".botonesjquery a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
<style type="text/css">
.botonesjquery {
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.botonesjquery li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.botonesjquery a {
padding: 14px 10px;
display: block;
color: #000000 !important;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxf-83bxch6_YFjb0wHUMowWX8-ZqZzUPbAFEKtnlSBY5PE3WcQTadSdp_5vlNQUyWaGLF7WT5F2pFkYeYUWQXnkswgamnwc5ufnlszItHcRnZf0kGcaJ8J8m7DkcWCdUXuu2mdN7zZEU/s164/boton%2520jquery%2520-%2520REDEANDO.gif) no-repeat center center;
}
.botonesjquery li em {
font-weight: normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih7aNJCBQboEUzsO2TRhMyV3z5PmEwAxvmBrpdh8PxiC1l_B8wAdOfmo7odujrQxVdPSHLfDUbCt9QVk9BF-TOsuF_Nl38bnwlo5vHbwdnVJGe9wLckDECZFa3yRnVTpYQEZScOZtMaJk/s200/boton%2520jquery%2520hover%2520-%2520REDEANDO.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
</style>
Ahora, cada vez que quieras poner uno de estos botones, tan solo tienes que añadir este codigo alli donde quieras mostrarlo. Cambia lo que esta en color naranja por el enlace, el texto del tooltip y el texto del boton que tu quieras.
<ul class="botonesjquery"><li><a href="URL ENLACE" title="TEXTO TOOLTIP">TEXTO BOTON</a></li></ul>
