Tooltip-Variationen mit Jquery-Version

Question

Ich verwende das Tooltip-Widget jQuery UI mit Version 1.10.4 von jQuery UI. Ich habe bemerkt, dass Code, der mit jQuery 1.11.1 funktioniert, nicht mit jQuery 3.1.0 funktioniert.

ist der Code soll alle Instanzen von Titelelementen mit einem jQuery UI Tooltip ersetzen:

• This fiddle uses 1.11.1; beachten Sie, dass die drei Tooltips 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 erscheinen verwendet; beachten Sie, dass die drei Tooltips erscheinen ohne jQuery UI

Diese Geigen verwenden Sie den Code auf dem default example of the tooltip Styling, die 1.12.4 jQuery verwendet. Ich habe die Änderungsprotokolle von jQuery durchgesehen und nichts gefunden, was darauf hindeutet, dass der Code, der v3 verwendet, nicht funktionieren sollte - was habe ich verpasst?

Answer 1

Versuchen Sie stattdessen:

Javascript:

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

Answer 2

funktioniert richtig mit der neuesten Version von 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> 

ich ungezählte den folgenden Fehler mit 3.1 die ältere Version ausgeführt wird. 0:

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

Aber es scheint insgesamt zu funktionieren.