Popover

API

Popover

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.toggleSelector String Selector for toggling element (optional, default '[data-ecl-popover-toggle]')
  • options.attachClickListener Boolean Whether or not to bind click events on toggle (optional, default true)
  • options.attachKeyListener Boolean Whether or not to bind keyboard events (optional, default true)

init

Initialise component.

destroy

Destroy component.

handleClickOnToggle

Toggles between collapsed/expanded states.

Parameters

• e Event

openPopover

Open the popover.

closePopover

Close the popover.

positionPopover

Manage popover position.

handleKeyboardGlobal

Handles global keyboard events, triggered outside of the popover.

Parameters

• e Event

handleClickGlobal

Handles global click events, triggered outside of the popover.

Parameters

• e Event

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.POPOVER (optional, default {})

Returns Popover An instance of Popover.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="Popover" attribute to component's markup:

<div class="ecl-popover" data-ecl-popover data-ecl-auto-init="Popover">...</div>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-popover on the page:

var elt = document.querySelector('[data-ecl-popover]');
var popover = new ECL.Popover(elt);
popover.init();