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

Question

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

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

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

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

在 Chrome Inspect 中我看到一个错误：

Uncaught TypeError: undefined is not a function

我认为它与页脚区域中的 JS 函数有关，我从工具提示页面复制了该函数，但我不确定如何修复它。

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

有什么想法吗？

Answer 1

我在控制台看到$ is not a function 但是好像包含了 jQuery。

尝试改变

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

到

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