How to use Foundation’s advanced features

Last time we covered our bicycle enthusiast’s page, we built an entire basic page in less than twenty minutes flat using the magic of Foundation. Today, we’re going to take that magic even further, and without touching a single line of jQuery or CSS, you’ll learn how to upgrade your site’s functionality with the following techniques:

  • We’ll add custom pop-up tooltips over any element on the page
  • Turn a series of images and a block of text into an interactive carousel
  • Add a modal dialog to pop up with a click of a button

What’s most exciting is that all of the features we add in today’s tutorial are added with nothing more than Foundation 5’s libraries that come packaged as default — no extra libraries required!

Have you been experimenting with Foundation 5? What parts of it do you enjoy the most? Let us know in the comments.

  • James George

    Awesome Sam! I actually did a couple of similar videos for my website. They might help web designers to create awesome sites using Foundation 5.

  • Craig R Morton

    Does this still work with Foundation 5? I’m trying to get the tooltips working, but they don’t seem to be. No errors in the console. Also, you didn’t mention about including foundation.tooltip.js.

    • Craig R Morton

      Apologies, typo on my behalf. It does indeed work as described.