Docs

Everything You Need to Know

Widgets

Popover

Popovers are a menu system on mobile devices. Having actual menus doesn't make sense because they are hard targets for the finger. But having a tappable target that can reveal a popover is a useful and satisfying experience for the user.

A popover is just a container into which you can put whatever you want your users to interact with. That might be a list or a set of buttons. What you put there depends on your needs.

Popovers are created on demand, meaning they aren't lying rendered at load time and sticking around unused. They are created when needed, then deleted. To setup a popover, you need to provide the $.Popover() the necessary options:

$('#showPopover1').on('tap', function() {
  var trigger = this;
  $.Popover({
    title: 'Fruits',
    trigger: trigger,
    content: popoverContent,
    callback: function() {
      popoverEventHandler('fruitsPopover');
    }
  });
});

The title is only displayed on iOS. The trigger, is the element the user interacts with to show the popover. The popover will be displayed relative to the position of the trigger element. The content is a string of markup that will be injected into the popover. As we mentioned earlier, this could be a list, or a series of buttons. Finally we provide a callback. We can use this callback to register a delegated event on the popover to handle user interactions.

Simple Layout

Check out the file "popover.html" in the examples folder. Read the following instructions for getting the examples.

Popover Example

See the Pen Popover by Robert Biggs (@rbiggs) on CodePen.

Popover with Android Theme

See the Pen Popover for Android by Robert Biggs (@rbiggs) on CodePen.