jQuery 버전의 툴팁 변형

Question

jQuery UI 툴팁 위젯을 사용하고 있습니다. 버전 1.10.4의 jQuery UI가 필요합니다. 나는 jQuery 1.11.1에서 작동하는 코드가 jQuery 3.1.0에서 작동하지 않는다는 것을 알아 냈다.

코드는 jQuery를 UI 툴팁 제목 요소의 모든 인스턴스를 대체 할 예정이다 :

• This fiddle uses 1.11.1; 세 툴팁 jQuery를 UI

$(function() { 
 
    $(document).tooltip(); 
 
});

.ui-tooltip { 
 
    padding: 8px; 
 
    position: absolute; 
 
    z-index: 9999; 
 
    max-width: 300px; 
 
    -webkit-box-shadow: 0 0 5px #aaa; 
 
    box-shadow: 0 0 5px #aaa; 
 
    border-width: 2px; 
 
    background-color: DarkSeaGreen; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> 
 
<p>But as it's not a native tooltip, it can be styled. Any themes built with 
 
    <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p> 
 
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> 
 
<p> 
 
    <label for="age">Your age:</label> 
 
    <input id="age" title="We ask for your age only for statistical purposes."> 
 
</p> 
 
<p>Hover the field to see the tooltip.</p>

• This fiddle uses 3.1.0을 사용하여 나타날 참고; 세 툴팁 jQuery를 UI가이 바이올린은 jQuery를 1.12.4 사용하는 default example of the tooltip의 코드를 사용

스타일링없이 나타나 있습니다. jQuery의 변경 로그를 살펴본 결과, v3를 사용하는 코드가 작동하지 않아야한다고 제안하는 내용을 찾지 못했습니다. 무엇을 놓쳤습니까?

Answer 1

대신을 시도해보십시오

자바 스크립트 :

$(function() { 
    $('[title]').tooltip(); 
}); 

Answer 2

이의 jQuery UI의 최신 버전이 제대로 작동 :

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<style> 
    .ui-tooltip { 
    padding: 8px; 
    position: absolute; 
    z-index: 9999; 
    max-width: 300px; 
    -webkit-box-shadow: 0 0 5px #aaa; 
    box-shadow: 0 0 5px #aaa; 
    border-width: 2px; 
    background-color: DarkSeaGreen; 
    color: white; 
    } 
    label { 
    display: inline-block; 
    width: 5em; 
    } 
</style> 
<script> 
$(function() { 
    $(document).tooltip(); 
}); 
</script> 

https://jsfiddle.net/Twisty/c06cLbdv/3/ 나는 3.1 이전 버전을 실행하는 다음과 같은 오류를 헤아릴. 0 :

TypeError: elem.getClientRects is not a function 
https://code.jquery.com/jquery-3.1.0.js 
Line 9816 

하지만 전체적으로 작동하는 것 같습니다.