jQuery UI 위에 숨은 요소 위 툴팁

Question

다른 요소 (#hover) 안에 요소 (#hastitle)에 대한 툴팁이 필요합니다. 이벤트 전파를 중지하고 mouseover/mouseout에서 작업을 수행합니다.

jsfiddle example

HTML :

<div id="hover"> 
    <div id="hastitle" title="bar">fu</div> 
</div> 

JS :

$('#hover').on('mouseover mouseout', function (e) { 
    e.stopPropagation(); 
    $(this)[e.type == 'mouseover' ? 'addClass' : 'removeClass']('hover'); 
}); 
$(document).tooltip({ 
    tooltipClass: 'tip' 
}); 

왜 툴팁이 작동하지 않는 이유는 무엇입니까?

해결 방법 : 도구 설명 (#hover)이 아직없는 요소에 대해 mouseover/mouseout에서 e.stopPropagation()을 호출할지 여부가 확실하지 않습니다. 두 가지 경우 모두에 적용되는 솔루션은 대단히 감사하겠습니다.

Answer 1

위젯이 document에 초기화되었으므로 위젯의 이벤트 리스너가 첨부됩니다. 이벤트 전파를 방지하면 document과 연결된 핸들러에 도달하지 않습니다.

단순히 이벤트 전파를 허용하면 문제가 해결됩니다.

Updated Fiddle

---

이 더 #hover을 전파 이벤트를 방지해야하는 경우, 당신은 거기에 위젯이 아닌 document 초기화 할 수 있습니다 :

$('#hover').on('mouseover mouseout', function(e) { 
 
    e.stopPropagation(); 
 
    $(this).toggleClass('hover', e.type == 'mouseover'); 
 
}); 
 

 
$("#hover").tooltip({ 
 
    tooltipClass: 'tip' 
 
});

#hover, 
 
#hastitle { 
 
    padding: 25px; 
 
} 
 
#hover { 
 
    background-color: blue; 
 
} 
 
#hover.hover { 
 
    background-color: orange; 
 
} 
 
#hastitle { 
 
    background-color: green; 
 
} 
 
.tip { 
 
    background-color: red; 
 
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
<div id="hover"> 
 
    <div id="hastitle" title="bar">fu</div> 
 
</div>

을