1

So in a previous question I couldn't get the Jquery Mousemove feature to work on these tooltips for these divs within a 14 column 960 grid system I have. Now they work to some degree. They will only follow my mouse to like the 7th or 8th column (width). If you scroll all the way to the right where the other divs are the tooltip stops at a certain point. Not sure what is preventing it from following it all the way....Here is the link to it on JSFiddle: http://jsfiddle.net/penrysh/eoL1qqf9/

Here is the jquery:

$(document).ready(function(){
$('.tooltip').mouseover(function(e){

if( $(this).attr('data-tip-type') == 'text' ){
$('#tooltip_container').html( $(this).attr('data-tip-source') );        
} // this section grabs and shows the plain text tool-tip  typles

if( $(this).attr('data-tip-type') == 'html' ){
var elementToGet = '#'+ $(this).attr('data-tip-source');
var newHTML = $(elementToGet).html();

$('#tooltip_container').html(newHTML);
} // this section grabs and shows the tool-tips that are HTML and can be formatted and are in divs at bottom on index page
}).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'); // takes tooltip width and subtract from pageX position                                      so it will always be offset from the cursor based on the tooltip itself
}else{
$('#tooltip_container').css('left',(e.pageX-20)+'px'); // Determines where courser is and subtracts 20pxs from it
}

$('#tooltip_container').css('top',(e.pageY+20)+'px'); // Determines where courser is and subtracts 20pxs from it

}).mouseout(function(e){
});

}); // end ready
user3192569
  • 21
  • 1
  • 7

1 Answers1

1

change this:

$('#tooltip_container').css('left',(e,pageX-toolTipWidth+20)+'px');

to this:

$('#tooltip_container').css('left',(e.pageX-toolTipWidth+20)+'px');
inf1ux
  • 283
  • 1
  • 14