esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • beta Share
    • Tabs
    • Toggleable
  • Share us with:

ESL Footnotes Beta

Related Examples

  • Footnotes

ESLFootnotes is a custom element that is used to collect all ESLNote elements in bounds of the scope and output sorted and grouped list of collected notes.

ESLNote is a custom element that is used to show notification by the tooltip GUI element.

The elements are interrelated and don't make sense on their own. This is because once the elements are added to the DOM, they establish the link between ESLFootnotes and each ESLNote.

ESLNote is a badge with a number or symbol. When it's hovered or clicked (user-defined behavior), it shows a tooltip with text information. Depending on the state of the ESLNote, it may display:

  • 0 - if the note is not associated with the footnotes
  • * - if the note is linked to the footnotes but in a standalone mode
  • 1... (positive number) - ordinal index from the associated footnotes, if linked in a normal (default) mode

ESLFootnotes Attributes | Properties:

  • scopeTarget (string) - target element (ESLTraversingQuery selector) to define scope of footnotes (::parent by default)

  • grouping (string) - grouping note instances with identical content. Available options:

    • enable - default, notes with identical content will be grouped
    • disable - without grouping
  • back-to-note-label (string) - a text label to show in the title on the return-to-note button (Back to note by default)

ESLNote Attributes | Properties:

  • linked - read-only marker that appears on the note linked with the footnotes

  • standalone - read-only marker which indicates that the note remains independent of the notes even if it is linked with them (ignore mode, for example) and doesn't receive its ordinal index from the footnotes (the default * or a user-defined value is displayed)

  • tooltip-shown - read-only marker which appears when note's tooltip is shown

  • container - defines container element (ESLTraversingQuery selector) to determinate bounds of tooltip visibility (window by default)

  • ignore - MediaQuery to specify device media conditions when footnotes must ignore current note (not all by default)

  • html - content of note tooltip. If not present, it fills with innerHTML of ESLNote

  • standalone-label - note's label in the standalone mode (detached from footnotes), in the connected mode it is a numeric index that is calculated automatically. (* by default)

  • track-click - MediaQuery to define allowed to track click event media. (all by default)

  • track-hover - MediaQuery to define allowed to track hover event media. (all by default)


ESL v4.3.1 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko