Popovers are the equivalent of native popover menus. They can be open over, under, on the left or on the right of an element. They look like this: FourPopoverMenus

Markup declaration

Popovers are div containers which are styled with the class popover. They must have a data-gravity attribute to determine where the popover menu should be opened. Here is an example of a popover menu:

<div class="popover active" data-gravity="n">
  <ul class="list">
    <li class="active"><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>

Javascript Access method

Accessing the popover from Javascript is made as follows:

var UI = new UbuntuUI();
var dialog = UI.popover(document.getElementById('buttonId'), 'dialogId');

Interface definition

interface Popover{
  void show();
  void hide();
  void toggle();


  • void show(). shows the popover.

  • void hide(). hides the popover.

  • void toggle(). shows the popover if it is hidden, hides it if it is shown.

Predefined CSS classes

  • active: this class marks an item in the popover menu as active. By default, the background of that list item is light grey, the color of the text is orange.
Written on July 9, 2010