show element info on mouseover
http://stackoverflow.com/questions/16548160/html-javascript-scrolling-through-list-box-items-and-display-prompt-for-each/
HTML
<ul class="carlist">
<li data-info="2004 Ford Ranger XLT 2.3L 2WD 125758 miles $5,988">
2004 Ford Ranger
</li>
<li data-info="2005 Lexus RX 330 SUV 138732 miles $13,995">
2005 Lexus RX 330
</li>
<li data-info="1990 Mazda 626 0 miles $1,850">
1990 Mazda 626
</li>
<li data-info="1988 Chevrolet G20 CONVERSION 0 miles $1,500">
1988 Chevrolet G20
</li>
<li data-info="1993 Ford F150 XL Reg. Cab Long Bed 4WD 0 miles $2,950">
1993 Ford F150
</li>
<li data-info="1993 Dodge D350 Pickup Reg. Cab 8-ft. Bed 2WD 93000 miles $2,950">
1993 Dodge D350 Pickup
</li>
</ul>
<div id="carinfo">ABCD</div>
<div>a<br/>b</div>
CSS
ul.carlist {
list-style:none;
padding:0;
}
ul.carlist li {
padding: 5px;
margin: 5px;
background-color:#eef;
}
#carinfo {
position:absolute;
/*right:5px;*/
display:none;
background-color: white;
border:1px solid blue;
padding:2px;
}
JavaScript
$(document).ready(function(){
var lastli = null;
var ci = $('#carinfo');
$('.carlist li').hover(function(e){
if (lastli == this) { return; } else {}
var top = e.pageY;
var left = e.pageX;
if (left+100 > $(window).width()){
left -= 100;
}
//console.log(top, left);
ci.html($(this).data('info'));
ci.css({'top':top, 'left': left}).show();
},function(e){
var elt = e.toElement || e.relatedTarget; // http://stackoverflow.com/questions/7761117/check-what-element-the-cursor-is-on-upon-mouseleave-with-jquery#7761228
if (elt != this && elt != ci[0]) {
ci.hide();
lastli = null;
} else {
lastli = this;
}
});
ci.mouseleave(function(e){
var elt = e.toElement || e.relatedTarget;
if (elt!=lastli) {
ci.hide();
lastli = null;
}
});
});