CODEWITHSUNDEEP
javascripttooltip
naser
naser

Reputation: 171

Why Doesn't My Foundation Tooltip Work?

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:

upload.tehran98.com/img1/6taveochivfnio6ch6h2.png

Now what do I do to have tooltip like this?

upload.tehran98.com/img1/zkmxqt8nqvkbnyn4bd.png

Upvotes: 4

Views: 6537

Answers (4)

Learner
Learner

Reputation: 786

I solved it by putting modernizr.js in the foundation scripts folder and by calling the modernizr.js in the head section of the page. 

<script src="~/Scripts/foundation/modernizr.js"></script>

All working charm!!

Upvotes: 1

chaitanya
chaitanya

Reputation: 31

<!doctype html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.tooltip.js"></script>
<script src="js/modernizr.min.js"></script>
</head>
<body>
<script src="/js/foundation.min.js"></script>
<script>
  $(function(){
    $(document).foundation();    
  })
</script>
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
</body>
</html>

Upvotes: 2

naser
naser

Reputation: 171

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:

enter image description here

Upvotes: 4

MattCamp
MattCamp

Reputation: 250

I was having the same problem as @naser and here is how I fixed my problem:

My first issue was that I did not have modernizr running on my site. In the <head> section of your page add Modernizr:

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

This should work if your Foundation files are installed correctly, but for some reason mine were not. So I used the files from CDNJS to install modernizr:

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/modernizr.js"></script>

If you don't want to use files from CDNJS then you should navigate to your Foundation/js folder and see if the files(modernizr.js, foundation.js, etc...) are in there. If they are not try checking the bower_components folder and then copy them over to the Foundation/js folder. If you can't find them anywhere try reinstalling Foundation.

And that worked great for me. Hope this helps.

Upvotes: 1

Related Questions