Tooltip in Hudson

by shapeshifta

HTML

<table id="sorter">
    <tr>
        <td>
            <a href="http://www.unister.de/geschaeftsbereiche/geschaeftsbereiche.html">Link</a>
        </td>
    </tr>

</table>

CSS

#pagePreview{
position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
}
a[href$="html"]{padding:10px}

JavaScript

(function() {
 $("head").append("<style type='text/css'>#pagePreview{position:absolute;border:1px solid #ccc;background:#333;padding:15px;display:none;color:#fff;}a[href$='html']{padding:10px}#close{color:#fff;float:right;margin-top:-10px}</style>");
xOffset = 50;
    yOffset = 20;

    $("body").append('<p id="pagePreview"><a href="#" id="close">Close</a><iframe id="showFrame" src="#" width="600" height="500"></iframe></p>');
    var preview = $("#pagePreview"), showFrame = $("#showFrame"), close = $("#close");

    close.live('click', function(){
        preview.hide();
    });

    $('#sorter')
        .delegate("a[href$='html']", 'mouseover mouseout', function(e) {
            thumb = $(this).attr('href');
       
        if (e.type === 'mouseover') {
            showFrame.attr('src', thumb);
            preview
                .css({"top": (e.pageY - xOffset) + "px",
                    "left": (e.pageX + yOffset) + "px"})
                .show();
        } else {
            //preview.hide();
        }
    });


})();