<hx-popover> v0.2.0+ HelixUI v0.2.0 or later required

The custom <hx-popover> element defines a section of floating content to appear nearby other elements. It is often toggled by a companion <hx-disclosure> element.

Permitted Parents
any
Permitted Children
In this order:
  1. <header> (optional)
  2. <hx-div>
  3. <footer> (optional)
Events
Any of the following:
  • close
  • open
  • reposition

Attributes

Attributes enable declarative configuration of an element, via HTML markup.

open (optional)

If present, the <hx-popover> will be shown on screen.

position (optional)

Configures the position of the <hx-popover> in relation to its relative element.

relative-to (optional)

The ID of an element in the same document as the <hx-popover> element and the control element. The first element with a matching ID is known as the relative element for the <hx-popover>.

If omitted, the control element will act as the relative element.

Properties

JavaScript properties enable programmatic access to an element's configuration and state.

controlElement {HTMLElement} read-only

Returns the first HTML element whose aria-controls attribute matches the ID of the <hx-popover>.

The control element is used to attach various DOM event listeners, in order to determine when to show or hide the <hx-popover>.

open {Boolean [false]}

Indicates whether or not the <hx-popover> should be displayed.

optimumPosition {String|undefined}

Optimum position determined by internal positioning algorithm.

It will return undefined if <hx-popover> hasn't been repositioned.

position {String [bottom-right]}

Configures the position of the <hx-popover>, in relation to its relative element.

Reflects the position attribute.

relativeElement {HTMLElement} read-only

HTML element used as a point of reference for calculating the fixed position of the <hx-popover>.

If the relative-to attribute is defined, this will return the first element whose ID matches the relativeTo property. Otherwise, it will return the value of controlElement.

relativeTo {String}

A string corresponding to the ID of the relative element.

Reflects the relative-to attribute.

See Also