jQuery UI Tooltip - Not Working

jQuery UI Tooltip - Not Working

I am trying to get the tooptip to work when I hover over a span tag, below is the code:

  1. <div class="rewards-points">
          <div class="price-box">
  2.             <span class="price"> You will earn 50 points for purchasing this product!</span>
  3.       </div>
          <script type="text/javascript">
                jQuery(document).ready(function() {
                      jQuery('.rewards-points .price').tooltip({content: 'The amount listed is the number of reward points you will earn by purchasing this product.&amp;nbsp; Reward points can be applied as payment for future orders.&amp;nbsp; You can also earn reward points by referring friends and writing product reviews.'});
                });
          </script>
    </div>
I have verified that jQuery('.rewards-points .price') is a valid selector, but when I hover over the div tag, the content does not show.  I have included the css files for jQuery UI, and the jQuery UI min file.  Here is a link to the page where it is not working: https://destinationvitamins.uldev.co/now-foods-methyl-b-12-5000-mcg-120-lozenges

Please Help.