イメージホバーのツールチップが正しく機能しない

Question

現在問題が発生しています。hereを確認できます。ロゴの上にマウスを置くと、ツールチップが表示されます。ザッツOK、しかし

あなたはFirefoxでそれをしようとすると、ツールチップは、あなたがChromeでそれをしようとすると、ツールチップが（間違った）マウスを、以下のロゴ（正しい）

の下で立ち往生している

私はどのように修正することができますこの？

私はこのサイトで次のコードを使用しています。

<script type="text/javascript"> 
function showTooltip(e, tooltip) 
{ 
    e = window.event ? window.event : e; 
    tooltip = document.getElementById(tooltip); 
    if(tooltip.style.display != "block") 
     tooltip.style.display = "block"; 
    tooltip.style.left = event.clientX + "px"; 
    tooltip.style.top = event.clientY + "px"; 
} 

function hideTooltip(e, tooltip) 
{ 
    e = window.event ? window.event : e; 
    tooltip = document.getElementById(tooltip); 
    if(e.toElement == tooltip) 
    { 
     showTooltip(e, tooltip); 
     return; 
    } 
    tooltip.style.display = "none"; 
} 

そして、これは、ロゴコード

<img class="logo-main scale-with-grid hastooltip" 
src="#" onmousemove="showTooltip(event, 'dvTooltip');" 
onmouseout="hideTooltip(event, 'dvTooltip');" /> 

<div id="dvTooltip" style="display:none;position:absolute;background-color:#191919; padding: 15px; bottom: -87px; z-index: 100;" 
onmousemove="showTooltip(event, 'dvTooltip');"> 

CONTENT 
</div> 

私はロゴの下に固執するとChrome上でマウスを追跡しないようにボックスを必要である、ということは可能ですか？

Answer 1

実際にはChromeが正常に動作しています:)、コードはツールチップに移動を指示しています。

は、ここでは、任意の方法は、あなたのコードの作業バージョンです

var logo = document.querySelector('.hastooltip'); 
var tooltip = document.querySelector('#dvTooltip'); 

// Set tooltip height 
tooltip.style.height = '60px'; 

function showTooltip(e) { 
    e = window.event ? window.event : e; 

    if(tooltip.style.display != "block"){ 
     tooltip.style.display = "block"; 
     tooltip.style.position = "fixed"; 
    } 

    tooltip.style.left = (logo.getBoundingClientRect().x - 30) + 'px'; 
    tooltip.style.top = (logo.getBoundingClientRect().y + logo.getBoundingClientRect().height + 10) + 'px'; 
} 

この部分は、 "tooltip.style.height = '60PX';"あなたがDOM要素に高さを追加するならば、あなたは省略することができます。