Mouseover display of table in Chrome/Firefox

Question

When I mouseover the row of this table, it displays some descriptions.

html:

 <tr title="{{transaction.submissionLog}}" class="mastertooltip">...

JavaScript:

$('.masterTooltip').hover(function(){
            // Hover over code
            var title = $(this).attr('title');
            $(this).data('tipText', title).removeAttr('title');
            $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
            // Hover out code
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
    }).mousemove(function(e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex })
    });

and css:

.tooltip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#FAEBD7;
    border-radius:5px;
    padding:10px;
    color:#fff;
    font-size:12px Arial;
}

It works on Chrome, but the background color is different in the css file. I don't thinks css affects this. In Firefox, the border is missing on the right, and does not display the content at the end of every row.

Answer 1

1) in your code, the casing isn't correct masterTooltip is cased differently in the HTML and JS (assuming you did a copy paste).

2) What version of FireFox are you using? When I attempt to reproduce the error in this fiddle: http://jsfiddle.net/Lxwq3jwq/3 .

$('.masterTooltip').hover(function () {
// Hover over code
var title = $(this).attr('title');

$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
    .text(title)
    .appendTo('body')
    .fadeIn('slow');
  }, function () {
  // Hover out code
  $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
  }).mousemove(function (e) {
  var mousex = e.pageX + 20; //Get X coordinates
  var mousey = e.pageY + 10; //Get Y coordinates
  $('.tooltip')
      .css({
      top: mousey,
      left: mousex
   })
});

I find that everything seems to be working but I'm using the latest firefox. I'm going to assume that this is a CSS3 issue, since I can't seem to find issues with the js or HTML, other than the casing issue. I'm going to assume the pink background color with white text is just for demonstration, otherwise please increase the contrast.

3) When reproducing an issue for this code, please use a fiddle so its easier for people to reproduce this issue, so you can be helped easier in the future.