[APORTE] Simple ToolTip

[TrinityCore]

Hola gente, espero esten bien.

Bueno, estaba aburrido y pense en hacer un tooltip simple con jquery, y decidi ponerlo aqui por si hay alguna persona que sea relativamente nueva en esto y este interesada en aprender, dado a que mi codigo es simple porque tambien soy nuevo sera mas facil aprenderlo..

esto no es mas que un aporte instructivo y que espero incite a las personas a crear cosas para sus websites, ademas de aprender nuevas cosas que nos serviran para un futuro.

El CSS no esta terminado, como dije era un test, ya que queria saber si funcionaba.

Código CSS:

#test{
    border:1px solid #fff;
    width:20px;
    height:20px;
}
#tooltip_box{
    border:1px solid #666;
    background-color:rgba(0,0,0,0.8);
    width:150px;
    padding:10px 10px;
    text-align:center;
    color:#fff;
    float:left;
}
 

Código Javascript:

$(document).ready(function(){
    $("#tooltip_box").hide();
    $("*.tip").on("mousemove", function(event){
        var clase = $(this).attr("class");
        if(clase == "tip"){
            var x = event.pageX-340;
            var y = event.pageY-250;
            $("#tooltip_box").css({"margin-left":""+x+"px", "margin-top":""+y+"px"});
            var tip = $(this).attr("tip");
            $("#tooltip_box").fadeIn(300);
            $("#tooltip_box").html(tip);
            
        }
    });
    $("*.tip").on("mouseleave", function(){
        $("#tooltip_box").fadeOut(300);
    });
});
 

Código HTML:

<div id='test' class='tip' tip='estatus'></div>
<div id='tooltip_box'></div>
 

no creo que sea 100% efectivo, dado a que lo desarrolle en unos minutos y no le dedique todo el tiempo... repito, fue un testeo para ver si funcionaba.

cuando se me viene algo a la cabeza lo intento, aves sale aveces no..