Tooltips

by alano

HTML

<span class="hint" data-hint="1">Labeltext1</span>
<span class="hint" data-hint="2">Labeltext2</span>
<span class="hint" data-hint="3">Labeltext3</span>

CSS

span.hint {
    display:inline-block;
    width: 200px;
    background-color:Yellow;
    margin: 10px 10px;
}
div#tooltip {
    display: none;
    position: absolute;
    height: 20px; 
    border: 2px solid #FF0000; 
    background-color: #FF9999;
    border-radius: 5px;
    padding: 3px;
}

JavaScript

$(document).ready(function () {
    var url = "/Trainer/GetSessionSummary";
    var $tooltip = $("<div id='tooltip'></div>").appendTo("body");
    $(".hint").on({
        mousemove: moveTooltip,
        mouseenter: showTooltip,
        mouseleave: hideTooltip
    });
            
            
    function hideTooltip(){
        $tooltip.stop(true, true).fadeOut("fast");
    }
            
    function showTooltip(){
        var rData = { sessionId: $(this).data("hint") };
        //next line is only for jsfiddle's ajax simulator
        url = "/echo/html/", rData = { html: "<span>Hint text " + $(this).data("hint") + "</span>" };
        $.post(url, rData, function(data) {
            $tooltip.html(data).stop(true, true).fadeIn("fast");
        });
    }

    function moveTooltip(e) {
        var x = e.pageX + 16, y = e.pageY + 16;
        $tooltip.css({ left: x, top: y });
    }

});