Question

我正在使用jQuery UI工具提示小部件，jQuery UI版本为1.10.4。我注意到与jQuery 1.11.1一起使用的代码不适用于jQuery 3.1.0。

代码应该用jQuery UI工具提示替换所有title元素实例：

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

适用于最新版本的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

但它似乎总体上起作用。

Answer 2

请改为尝试：

使用Javascript：

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

使用jquery版本的工具提示变体

2 个答案: