工具提示變化與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造型

這些小提示使用default example of the tooltip上的代碼，該代碼使用jQuery 1.12.4。我瀏覽了jQuery的更改日誌，但沒有發現任何暗示使用v3的代碼不應該工作 - 我錯過了什麼？

Answer 1

試試這個：

的Javascript：

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

Answer 2

使用jQuery UI的最新版本中正常工作：https://jsfiddle.net/Twisty/c06cLbdv/3/

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

我無數以下錯誤3.1使用舊版本的。 0：

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

但它確實似乎總體工作。