javascript - 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) 在您的代码中，大小写不正确 masterTooltip 在 HTML 和 JS 中的大小写不同(假设您进行了复制粘贴)。

2) 您使用的 FireFox 版本是什么？当我尝试重现此 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
   })
});

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

3)当重现此代码的问题时，请使用 fiddle ，以便人们更容易重现此问题，以便您将来可以更轻松地获得帮助。