Tooltip sample JS, CSS, HTML

tooltip.css

body{
    padding: 50px;
}

#container {
    position: fixed;
    display: none;
    border: 1px red solid;
    z-index: 4;
}

li {
    background-color: white;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

tooltip.html

<a href="#test" title="My tooltip text">Sample link</a>

<div><span id="sample" class="noselect"> sample text </span></div>

<div id="container" class="noselect">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

tooltip.js

$(document).ready(function() {
    var c = $('#container');
    var s = $('#sample');
    var li = c.find('li');
    console.log(li);
    li.each(function(i, elem) {
        $(elem).mouseout(function(e) {
            $(elem).css('background-color', 'white');
       });
    });
    
    li.each(function(i, elem) {
        $(elem).mouseover(function(e) {
            $(elem).css('background-color', 'blue');
            console.log(e.target.innerHTML);            
       });
    });
    
    s.mousedown(function(e) {
        c.show();
        c.css('top', e.clientY);
        c.css('left', e.clientX);
    });
    
    $(document).mouseup(function(e) {
        c.hide();
    });
    
    /*c.mouseover(function(e) {
        $(e.target).css('background-color', 'blue');
        console.log(e.target.innerHTML);
    });*/
});

http://jsfiddle.net/3Sf6x/161/