CODEWITHSUNDEEP
javascriptjquery
Kane
Kane

Reputation: 909

Why does this jQuery tooltip not work?

I'm trying to use this tooltip: http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

Here's the test page (running in WooCommerce/WordPress): https://blendbee.com/shop/uncategorized/test-product-2/

You can see the "ingredient" under "Add-Ons" is underlined. If you put your mouse over it, the title is shown, but the jQuery tooltip doesn't appear. The HTML for the "ingredient" is:

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

In Chrome Inspect I see an error:

Uncaught TypeError: undefined is not a function

I assume it has to do with the JS function in the footer area, that I copied from the tooltip page, but I'm not sure how to fix it.

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

Any ideas?

Upvotes: 0

Views: 122

Answers (1)

andrew
andrew

Reputation: 9583

I am seeing $ is not a function in the console but it looks like jQuery is included.

try changing 

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

to 

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

Upvotes: 1

Related Questions