$(document).ready(function() {
    
    var title;
    
    $(".help").mouseover(function(){
        title = $(this).attr("title")
        $($(this)).after("<div id=\"helpbox\" style=\"position:absolute; display: none;\"><div style=\"width: 200px; background-color: white; border: 2px solid #dfe7e7; position: relative; padding: 10px; background-color: #f5fafe;\"><p style=\"text-decoration: none;\">" + title + "</p></div></div>").fadeIn();
        $(this).attr("title", '')
        $("#helpbox").fadeIn("slow");
    }).mouseout(function(){
        $("#helpbox").fadeOut("slow");
         $(this).attr("title", title);
      $("#helpbox").remove();
    });
    
    $(".adreview").mouseover(function(){
        title = $(this).attr("title")
        value = title.split("x");
        $($(this)).after("<div id=\"helpbox\" style=\"position:absolute; display: none; margin-left: -100px;\"><div style=\"background-color: white; border: 2px solid #dfe7e7; position: relative; padding: 10px; background-color: #f5fafe;\"><p>Mainoksen koko:</p><div style=\"width: " + value[0] + "px; height: " + value[1] + "px; background-color: #3aaad9;color white; text-align: center;\"><p style=\"color: white;\">" + value[0] + "x" + value[1] + " pikseliä</p></div></div></div>").fadeIn();
         $(this).attr("title", "")
        $("#helpbox").fadeIn("slow");
    }).mouseout(function(){
        $("#helpbox").fadeOut("slow");
        $(this).attr("title", title);
      $("#helpbox").remove();
    });

});