为什么这个jQuery工具提示不起作用？

Question

我正在尝试使用此工具提示： http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

这是测试页面（在WooCommerce / WordPress中运行）： https://blendbee.com/shop/uncategorized/test-product-2/

您可以看到“Add-Ons”下的“成分”带有下划线。如果将鼠标放在它上面，则会显示标题，但不显示jQuery工具提示。 “成分”的HTML是：

<abbr title="Here's some info about this ingredient..." rel="tooltip">ingredient</abbr>

在Chrome中检查我发现错误：

  

未捕获的TypeError：undefined不是函数

我认为它与页脚区域中的JS函数有关，我从工具提示页面复制了，但我不知道如何解决它。

$(function(){ var targets = $( '[rel~=tooltip]' )...

有什么想法吗？

Answer 1

我在控制台中看到$ is not a function 但它看起来像是jQuery。

尝试更改

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

到

  (function($) {
      $(function(){...});
  })(jQuery);