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

The custom <hx-tooltip> element displays supplemental information related to an element on the page.

Permitted Parents
any
Permitted Children
flow content
Events
Any of the following:
  • close
  • open
  • reposition

Attributes

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

for

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

open (optional)

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

position (optional)

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

relative-to (optional)

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

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 HTML element whose ID matches the htmlFor value.

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

htmlFor {String}

A string corresponding to the ID of the control element.

Reflects the for attribute.

open {Boolean [false]}

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

optimumPosition {String|undefined}

Optimum position determined by internal positioning algorithm.

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

position {String [top]}

Configures the position of the <hx-tooltip>, 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-tooltip>.

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