Phonon Framework



Popovers allow users to take an action by selecting from a list of choices revealed upon opening a temporary, new sheet of material. They are located on the .header-bar or on the .btn-popover button. They are fired from button actions and from the title.

Live Example



Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="popovers.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="popovers.js"></script>

RequireJS Compatible

require(['popovers'], function(popover)) {

Popover instance

Phonon creates your popover:

var popover = phonon.popover()

If you have a custom HTML for you popover, you need to pass its id: Please read the section custom popover.

var popover = phonon.popover('#popover-id')

Set the list

popover.setList(array, function)

With a simple array:

popover.setList(['a', 'b', 'c'])

With an array of objects:

        text: 'a',
        value: 'a'
        text: 'b',
        value: 'tg'

With a custom list item builder:

popover.setList(['a', 'b', 'c'], function (item) {
    var text = typeof item === 'string' ? item : item.text;
    var value = typeof item === 'string' ? item : item.value;
    return '<li><a class="padded-list" data-value="' + value + '">' + text + '</a></li>';

Set a trigger button

The first argument is the button. It can be a string selector or a DOM object.
The second argument permits to set the selected value from the popover in the target (button).

popover.attachButton('.button-trigger-popover', true)

Open in header bar

You can open the popover in a given direction.'left') // in header-bar'title-left') // below the title (left-aligned) in header-bar'right') // in header-bar'title') // below the title in header-bar

Open from a given target (button)

You can open the popover above a given button. This is particularly useful if you use the same popover in different locations.


You can pass optional options:

popover.openFrom('.button-for-popover', {direction: 'top right', margin: 0, width: 200})




JavaScript callback:

popover.onItemChanged(function (data) {

DOM callback:

document.querySelector('#my-popover').on('itemchanged', function (event) {

Complete example

var popover = phonon.popover()
    .setList(['a', 'b', 'c'])
    .attachButton('.my-button', true)
    .onItemChanged(function (data) {

Custom popovers


Place the .popover code right after your <body> tag.

<div class="popover" id="my-popover">
    <ul class="list">
        <li><a class="padded-list">Item 1</a></li>
        <li><a class="padded-list">Item 2</a></li>
        <li><a class="padded-list">Item 3</a></li>
        <li><a class="padded-list">Item 4</a></li>

Button - popover trigger

Set the popover's id with the following attribute data-popover-id.

<header class="header-bar">
    <button class="btn pull-left icon icon-menu" data-popover-id="my-popover"></button>
    <button class="btn pull-right icon icon-menu" data-popover-id="my-popover"></button>
    <h1 class="title pull-left arrow" data-popover-id="my-popover">Title</h1>

<div class="content padded-full">
    <button class="btn fit-parent primary" data-autobind="true" data-popover-id="">Select</button>