$(document).ready(function() {
    $('.material').hover(function(e) {
        var img = $(this).children('img');
        var src = img.attr('src');
        src = src.substr(0, src.length - 4);
        $('body').append('<p id=tooltip>' + img.attr('color') + '<br><img src=' + src + '_xn.jpg></p>');
        $('#tooltip').css('top', (e.pageY + 20) + 'px').css('left', (e.pageX - 35) + 'px').fadeIn('fast');
    }, function() {
        $('#tooltip').remove();
    });
    $('.material').mousemove(function(e) {
        $('#tooltip').css('top', (e.pageY + 20) + 'px').css('left', (e.pageX - 35) + 'px');
    });
});