Skip to content

Instantly share code, notes, and snippets.

@patik patik/popover.md
Last active Sep 14, 2015

Embed
What would you like to do?
Popover plugin specifications

Popover

Overview

The popover plugin displays HTML in a container that overlays the page. It is triggered by clicking on a button or other UI element and the container is positioned near the element. The popover can be displayed and hidden at will.

Usage

The plugin must be provided with an options object and a jQuery collection of elements.

$('.my-button').popover(options);

Clicking .my-button will toggle display of the popover.

To open or close a popover programmatically, trigger a click event on the element:

$('.my-button').click();

Options

At minimum, the options must contain HTML to display:

$('.my-button').popover({
    html: '<p>Hello world</p>'
});

For shorthand, if you only need to specify the HTML you can just pass a string:

// Equivalent to the previous example
$('.my-button').popover('<p>Hello world</p>');

Options

Property Type Description
html String Contents to be displayed (required)
badge Number A value to be displayed in a badge superimposed over the toggle element. If the value is less than 1, no badge will be displayed.
display Object Defines the display properties of the popover (see below)

Display options

Property Type Description
width String The width of the popover (must be a CSS-friendly value; default: auto)
height String The height of the popover (must be a CSS-friendly value; default: auto)
id String Optional ID to be added to the modal element
className String Optional class name(s) to be added to the popover

Example with default values

$('.my-button').popover({
    html: '',
    badge: 0,
    display: {
        width: 'auto',
        height: 'auto',
        id: '',
        className: ''
    }
});

Specifications

Clicking outside of an open popover will close it.

Only one popover may be open at a time. If a popover is open when a second popover is triggered, the first popover is closed before opening the second popover.

The popover container has the class .cui-popover.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.