title: Why Doesn't My Foundation Tooltip Work?
body: <p>I want to use a Foundation tooltip:
  <a href="http://foundation.zurb.com/docs/components/tooltips.html" rel="nofollow noreferrer">http://foundation.zurb.com/docs/components/tooltips.html</a></p>
  
  <p>According to the instructions: I put this code in <code>body</code> :</p>
  
  <pre><code>&lt;script&gt;
    document.write('&lt;script src=/js/vendor/'
      + ('__proto__' in {} ? 'zepto' : 'jquery')
      + '.js&gt;&lt;\/script&gt;');
  &lt;/script&gt;
  </code></pre>
  
  <p>and use:</p>
  
  <pre><code>&lt;script src="/js/foundation.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>&lt;script&gt;
    $(function(){
      $(document).foundation();    
    })
  &lt;/script&gt;
  </code></pre>
  
  <p>and I use this code in <code>body</code></p>
  
  <pre><code>&lt;span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!"&gt;extended information&lt;/span&gt;
  </code></pre>
  
  <p>But it does not work:</p>
  
  <p><img src="https://i.stack.imgur.com/DWwO3.png" alt="upload.tehran98.com/img1/6taveochivfnio6ch6h2.png"></p>
  
  <p>Now what do I do to have tooltip like this?</p>
  
  <p><img src="https://i.stack.imgur.com/6xemc.png" alt="upload.tehran98.com/img1/zkmxqt8nqvkbnyn4bd.png"></p>