Popover

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Examples

Click to show

<button class="am-btn am-btn-primary" data-am-popover="{content: 'I'm the click to show Popover'}">Click to show Popover</button>

Hover/Focus to show

Tooltip effect.

<button class="am-btn am-btn-success" 
        data-am-popover="{content: 'I'm the Hover/Focus to show Popover', trigger: 'hover focus'}">
  Hover/Focus to show Popover
</button>

Usage

Using Data API

Add data-am-popover attribute to elements and set options. All examples above use Data API.

<button data-am-popover="{content: 'What do you want to show?', trigger: 'hover'}">Popover
</button>

Using JS

Use $().popover(options) to add popover to elements.

<button class="am-btn am-btn-danger" id="my-popover">Popover via JS</button>

$(function() {
  $('#my-popover').popover({
    content: 'Popover via JavaScript'
  })
});

Options

Method

• .popover(options) - Activate the Popover on element. options is an object.
• .popover('toggle') - Switch between show and hide.
• .popover('open') - Show Popover
• .popover('close') - Hide Popover
• .popover('setContent', content) - Set the popover contents. v2.4.1+

Event

Events are defined on element that trigger the popover.