Why Doesn't My Foundation Tooltip Work?

Question

I want to use a Foundation tooltip: http://foundation.zurb.com/docs/components/tooltips.html

According to the instructions: I put this code in body :

<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>

and use:

<script src="/js/foundation.min.js"></script>

and:

<script>
  $(function(){
    $(document).foundation();    
  })
</script>

and I use this code in body

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

But it does not work:

Now what do I do to have tooltip like this?

Answer 1

I didn't use:

<script src="/js/custom.modernizr.js"></script>

and didn't download CSS: http://foundation.zurb.com/download.php

I use them and tooltip work now: