Saturday, May 6, 2017

Foundation tool-tip `without $(document).foundation();` and `modernizr`

By Hường Hana 1:30 PM , , , Leave a Comment

I am trying to initialize foundation tool-tip without initializing everything (i.e. $(document).foundation()) and I am failing in this simple task.

I am wondering (1) How to use new Foundation.Tooltip instead (2) do I need modernizr because documentation in foundation website did not mention modernizr as a requirement.

I mentioned modernizr because without that tool-tip would not have any styles nor html inside that would show.

Thank you

<!DOCTYPE html> <meta name="robots" content="noindex"> <html>  <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width">     <title>JS Bin</title> </head> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> --> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />  <body>     <div class="row">         <span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">           Hover me         </span>     </div>        <script id="jsbin-javascript">         $(document).ready(function() {             new Foundation.Tooltip($(".has-tip"), {                 allowHtml: true             });              // $(document).foundation();         })     </script> </body>  </html>

3 Answers

Answers 1

I haven't worked with foundation before so I'm definitely no expert. However, I think I've figured out why your code isn't working.

Working Code

You can get all the links needed and see an example of working code in the CodePen located here: http://codepen.io/SupposedlySam/pen/ybbYMp.

What you need to get Foundation Tooltip plugin working

  1. Foundation.css
  2. Modernizr.js (placed in the head tag or below all other scripts before body close (via Foundation's JavaScript Setup Page)
  3. JQuery.js
  4. Foundation.js
  5. Foundation.tooltip.js (only needed if not using foundation.min.js which includes all plugins)

Weird Stuff Not Really Told To You

  1. The tooltip will appear at the top-left of the body (at origin 0,0) if there isn't enough space for the height of the word plus the height of the tooltip.
  2. If you want your tooltips to stay open when clicking on the word associated to it, a tabIndex must be set on the element.
  3. If you're extending the options of a Foundation plugin you must initialize each element you want the functionality on individually.
  4. You must use &quot; instead of double quotes (") in html attributes and they cannot be escaped with a backslash (\).

Answers 2

if you do not want to initialise foundation on your entire document, you can initialise it on specifice elements, like : 

$('.has-tip').foundation();

foundation do not depend on modernizer, it works without any problem without modernizer.

and a codepen to a tooltip without calling document.foundation:

https://codepen.io/faw/pen/vmZjzg

Answers 3

To answer the second part first: Foundation 6 doesn't require Modernizr (but F5 did) (see: http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6) so you can use all of the Foundation 6 components entirely without Modernizr.

In your example I think you are mixing creating a tooltip dynamically:

new Foundation.Tooltip($(".has-tip"), {     allowHtml: true });

With initialising a tooltip:

$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally

OR

$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)

So to create and then initialise JUST the tooltips: 

new Foundation.Tooltip($(".has-tip"), {   allowHtml: true }); $('.has-tip').foundation();

For obvious reasons creation must precede initialisation.

See example: https://jsfiddle.net/tymothytym/b6eoh2yg/1/

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment