将鼠标悬停在Chrome / Firefox中显示表格

Question

当我将鼠标悬停在该表的行上时，它会显示一些描述。

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 })
    });

和CSS：

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

它可以在Chrome上运行，但是css文件中的背景颜色不同。 我认为CSS不会影响这一点。 在Firefox中，右侧缺少边框，并且不会在每一行的末尾显示内容。

Answer 1

1）在您的代码中，大小写不正确mastermastertip在HTML和JS中的大小写有所不同（假设您进行了复制粘贴）。

2）您使用的是哪个版本的FireFox？ 当我尝试重现此提琴中的错误时： 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
   })
});

我发现一切似乎都正常，但我使用的是最新的Firefox。 我将假定这是CSS3问题，因为除了大小写问题外，我似乎找不到js或HTML的问题。 我将假定带有白色文本的粉红色背景颜色仅用于演示，否则请增加对比度。

3）在为该代码复制问题时，请使用小提琴，以便人们更轻松地复制此问题，以便将来为您提供帮助。