Previously, I encountered an issue with the Jquery Mousemove feature not working properly on tooltips within divs in a 14 column 960 grid system. Now, although they work to some extent, they only follow my mouse up to the 7th or 8th column width. When scrolling all the way to the right where additional divs are located, the tooltip stops at a certain point and doesn't fully follow. I am unsure of what is causing this limitation. You can view the code on JSFiddle: http://jsfiddle.net/penrysh/eoL1qqf9/
The JQuery script used is as follows:
$(document).ready(function(){
$('.tooltip').mouseover(function(e){
if( $(this).attr('data-tip-type') == 'text' ){
$('#tooltip_container').html( $(this).attr('data-tip-source') );
}
if( $(this).attr('data-tip-type') == 'html' ){
var elementToGet = '#'+ $(this).attr('data-tip-source');
var newHTML = $(elementToGet).html();
$('#tooltip_container').html(newHTML);
}
}).mousemove(function(e){
var toolTipWidth = $('#tooltip_container').outerWidth();
var toolTipHeight = $('#tooltip_container').outerHeight();
var pageWidth = $('body').width();
if ( e.pageX > pageWidth/2) {
$('#tooltip_container').css('left',(e,pageX-toolTipWidth+20)+'px');
}else{
$('#tooltip_container').css('left',(e.pageX-20)+'px');
}
$('#tooltip_container').css('top',(e.pageY+20)+'px');
}).mouseout(function(e){
});
});