在Chrome/Firefox中鼠標懸停顯示錶格

當我將鼠標懸停在此表格的某一行上時，它會顯示一些說明。在Chrome/Firefox中鼠標懸停顯示錶格

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中，右側缺少邊框，並且不會在每行末尾顯示內容。

來源

2015-04-26 co len

在類名中有一個大小寫T，是不是會影響到你？ –

如果你在蹲在你的問題上添加一個工作示例，這將會非常好。 –

@OmriAharon你是對的套管是不正確的 – Daemedeor

1）在你的代碼中，外殼是不正確的masterTooltip在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）當重現此代碼的問題時，請使用小提琴，以便人們更容易重現此問題，以便將來可以更輕鬆地幫助您。

來源

2015-04-26 16:32:14 Daemedeor

在Chrome/Firefox中鼠標懸停顯示錶格

回答

相關問題