Popover popover.js

To use the Popover, first include the required javascript and css files.

Next, create the popover with either a jQuery plugin call, or by creating a classic javascript object:

The jQuery plugin

    var menu1 = {
        id: "menu1", title: "Hello World",
        contents: [
            {name: "Item 1"},
            {name: "Item 2"},
            {name: "Item 3"}]

Creating a javascript object

    var p = new OptionsPopover("#menu1");

Note: The id #menu1 is also the name linked to the first menu for that button. To access the starting menus from other buttons, just set the menu item's id to the starting menu's id.


Show Popover! Show Another Popover!


    <button id="menu1">Show Popover!</button>
    <button id="menu2">Show Another Popover!</button>


        id: "menu1",
        title: "Hello World!",
        contents: [
            {"name": "Menu Item 1", url: "m1"},
            {"name": "Menu Item 2", id: "m2"},
            {"name": "Link to second button's menu...", id: "menu2"}
        title: "Hello Again, World!",
        contents: [
                {"name": "Another Menu Item 1", url: "am1"},
                {"name": "Another Menu Item 2", url: "am2"},
                {"name": "Link to first button's menu...", id: "menu1"}


The following are jQuery custom events fired at different times within the popover:

Event Description Objects Passed
popover.created This event is fired at the end of the createPopover function. None
popover.resize This event is fired when the window is resized (redundant event, will be removed in future release). None
popover.setContent This event is fired at the end of the setContent function, showing the contents have been modified. None
popover.visible This event is fired at the end of the toggleVisible function and fires when the popover is visible to the user. (Currently does not wait css transitions to complete). None
popover.menuClicked This event is fired when a menu item in the popover has been clicked. None

Popover w/ jScrollPane Plugin

The popover can be easily integrated with the jScrollPane jQuery plugin. This adds mobile functionality to scrolling divs and adds more customizability to the look and feel of the popover.


    //To initialise, use the code below:
    $(document).on("popover.created", function () {
            horizontalGutter: 0,
            verticalGutter: 0,
            'showArrows': false

    $(document).on('popover.setContent popover.visible popover.resize', function (e) {