All geek questions in one place

Why is my hint not working?

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

According to the instructions: I put this code in the 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 this does not work:

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

Now, what am I doing to have such a hint?

upload.tehran98.com/img1/zkmxqt8nqvkbnyn4bd.png

+4
source share
4 answers

I did not use:

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

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

I use them and tooltips now:

enter image description here

+4
source 
 <!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>
+2
source

I had the same problem as @naser, and here is how I fixed my problem:

My first problem was that I did not have a modernizer working 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. Therefore, I used CDNJS files to install modernizr:

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

If you do not want to use files with CDNJS, you should go to the Foundation / js folder and see if there are any files there (modernizr.js, foundation.js, etc.). If they do not check the bower_components folder and then copy them to the Foundation / js folder. If you cannot find them anywhere, try reinstalling Foundation.

And it worked fine for me. Hope this helps.

+1
source

I solved this by installing the modernizr.js file in the funds script folder and calling modernizr.js in the main section of the page.

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

All working charm !!

+1
source

Source: https://habr.com/ru/post/1481075/

More articles:


All Articles