jQuery Popovers

Popovers are quickly becoming a very popular element on websites these days.  On mobile-optimised sites they can be used to tuck a navigation menu away so you can focus more on content without sacrificing screen real estate.  On full browser width sites, popovers also come in handy for displaying more information on a topic or even a description of a photo when a user hovers over it.  The possibilities are virtually endless and the implementation of a popover is relatively painless thanks to a little jQuery, html, and css.

When designing a mobile site recently, I was looking for a way to utilize the limited screen size while still including a navigation system that wouldn’t intrude on the content.  I decided to go with an iOS style popover method and began researching the best method to do this.  After a bit of looking around i came across a jQuery widget created by Julien Guimont which he aptly calls ‘iPad like popover in jQuery‘.

This very light script lets you define a link on which you’d like to include a popover to display additional content.  I used it specifically for a navigation menu but as you can see in this example we’ve created, it can contain plain text, images, or any other content you’d like.  We’ve also added scrolling abilities to it in the event you need to limit the height of the popover.
(Also, as you can see we’ve switched things up a bit here and used Bacon Ipsum for the dummy text.  Who doesn’t like a little bacon with their web development!?)

The implementation of this script is very simple.

  1. First, head over to Julien’s Github page and download the scripts to copy over to your server.
  2. Add the necessary links to the script and css files
    Example :

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="popover.js"></script>
    <link href="popover2.css" rel="stylesheet" type="text/css" media="screen" />
  3. Next, create a link where you’d like the popover to activate.
    <a id="my-button">Popover Link</a>
  4. Lastly, call the script at the bottom of your html code, just before the </body>tag.
    <script>
    $('#my-button').popover({header: '#my-popover > .header',
        content: '#my-popover > .content'});
    </script>

That’s the basics of how to implement popovers that work flawlessly on any device or browser!  You can proceed to alter the css and html to suit your needs but you now have all you need to get this up and running.  Let us know in the comments below if you use this on any of your sites!

Posted on by Kristian Posted in Coding

Add a Comment