이미지 호버에 대한 툴팁이 제대로 작동하지 않음

Question

현재 문제가있는 경우 here을 확인할 수 있습니다. 로고 위로 마우스를 가져 가면 툴팁이 표시됩니다. 파이어 폭스와 함께하려고하면 그게 전부 확인은하지만

는 툴팁은 사용자가 크롬 그것을 시도 할 경우

는 툴팁이

는 어떻게 해결할 수 (잘못된) 마우스를 다음 (올바른) 로고 아래에 붙어 이?

나는이 사이트에서 발견 한 다음 코드를 사용합니다.

<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> 

내가 로고 아래에 스틱 크롬에 마우스를 따라하지 않도록 상자가 필요하다는 것을 가능할까요?

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 = 'x 60 픽셀';" DOM 엘리먼트에 높이를 추가하면, 그럴 수 있습니다.