Artículo

---

0 ¡votar!

Style-My-Tooltips, un plugin para jQuery para la creación de Tooltips

Style My Tooltips es un plugin muy ligero creado para jQuery que permite la creación de Tooltips de forma sencilla y elegante.

Su uso es realmente sencillo, y conseguiremos un gran efecto. El tooltip saldrá de forma gradual del elemento donde lo utilicemos. El efecto solo se aplicará en aquellos elementos donde utilice el atribute “title”.

El plugin hace uso de una hoja de estilos para la creación del tooptips, la cual podremos modificar para cambiar el aspecto. Este código es el siguiente.

#s-m-t-tooltip{
position:fixed;
max-width:300px;
padding:6px 8px 8px 8px;
background:#222;
z-index:10;
display:inline-block; /*important*/
/*font*/
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
line-height:16px;
color:#fff;
/*css3 rounded corners*/
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

Como hemos dicho anteriormente, el código del plugin es muy ligero, unos 3 KB. Os ponemos aquí abajo este código.

(function($){
$.fn.style_my_tooltips = function(options) {
var defaults = {
tip_follows_cursor: "on",
tip_delay_time: 1000
};
var options = $.extend(defaults, options);
$("body").append("
<div id="s-m-t-tooltip"></div>
"); //create the tooltip container
smtTip=$("#s-m-t-tooltip");
smtTip.hide(); //hide it
return this.each(function() {
function smtMouseMove(e){
smtMouseCoordsX=e.pageX;
smtMouseCoordsY=e.pageY;
smtTipPosition();
}
function smtTipPosition(){
var cursor_tip_margin_x=0; //horizontal space between the cursor and tooltip
var cursor_tip_margin_y=24; //vertical space between the cursor and tooltip
var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
if(leftOffset<=$(window).width()){
smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);
} else {
var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
smtTip.css("left",thePosX);
}
if(topOffset<=$(window).height()){
smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);
} else {
var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
smtTip.css("top",thePosY);
}
}
$(this).hover(function(e) {
// mouseover
var $this=$(this);
$this.data("smtTitle",$this.attr("title")); //store title
var theTitle=$this.data("smtTitle");
$this.attr("title",""); //remove title to prevent native tooltip showing
smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it
smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay
if(options.tip_follows_cursor=="off"){
smtMouseMove(e);
} else {
$(document).bind("mousemove", function(event){
smtMouseMove(event);
});
}
}, function() {
// mouseout
var $this=$(this);
if(options.tip_follows_cursor!="off"){
$(document).unbind("mousemove");
}
clearInterval(smtTip_delay);
if(smtTip.is(":animated")){
smtTip.hide();
} else {
smtTip.fadeTo("fast",0);
}
$this.attr("title",$this.data("smtTitle")); //add back title
});
function smtTip_fadeIn(){
smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);});
}
});
};
})(jQuery);

Aunque nos podemos descargar el plugin aquí.

El uso del plugin es muy sencillo, tal y como os lo mostramos a continuación.

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.style-my-tooltips.js" type="text/javascript"></script>
<script>
$().ready(function() {
$("[title]").style_my_tooltips({
tip_follows_cursor: "on", //on/off
tip_delay_time: 1000 //milliseconds
});
});
</script>

De esta forma tan sencilla, nuestros tooptils tendrán otra apariencia totalmente distinta.

Pueden ver una demo en este enlace.

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios