jQueryバージョンのツールチップのバリエーション

Question

jQuery UIのツールチップウィジェットを使用しています（バージョン1.10.4のjQuery UIを使用しています）。私は、jQuery 1.11.1で動作するコードがjQuery 3.1.0で動作しないことに気付きました。

コードはjQueryのUIツールチップでtitle要素のすべてのインスタンスを置き換えることになっている：

• This fiddle uses 1.11.1。 3つのツールチップは、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を使用して表示されることに注意してください。 3つのツールチップがjQuery UIスタイリングなしで表示されることに注意してください。

これらのフェドルは、jQuery 1.12.4を使用するdefault example of the tooltipのコードを使用しています。私はjQueryの変更ログを見てきましたが、v3を使用するコードがうまくいかないことを示唆するものは何も見つかりませんでした。

Answer 1

代わりにこれを試してみてください：

Javascriptを：

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

しかし、それは全体的に動作するようです。