feat: add trigger esl-tooltip to esl-note

src/modules/esl-note/core/esl-note.less

@@ -4,6 +4,7 @@ esl-note {
   line-height: 0;
   vertical-align: baseline;
   top: -.5em;
+  cursor: pointer;
 
   &::before {
     content: '[';

src/modules/esl-note/core/esl-note.ts

@@ -1,7 +1,8 @@
 import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {bind} from '../../esl-utils/decorators/bind';
-import {ESLBaseElement, attr, jsonAttr, boolAttr} from '../../esl-base-element/core';
+import {attr, boolAttr} from '../../esl-base-element/core';
 import {ESLTrigger} from '../../esl-trigger/core';
+import {ESLTooltip} from '../../esl-tooltip/core';
 import {ESLFootnotes} from '../../esl-footnotes/core/esl-footnotes';
 import {EventUtils} from '../../esl-utils/dom/events';
 
@@ -13,6 +14,11 @@ export class ESLNote extends ESLTrigger {
   /** Linked state marker */
   @boolAttr() public linked: boolean;
 
+  @attr({defaultValue: 'toggle'}) public mode: string;
+  @attr({defaultValue: 'hover'}) public event: string;
+
+  public target = 'body';
+
   protected _$footnotes: ESLFootnotes | null;
   protected _index: number;
   protected _text: string;
@@ -69,4 +75,31 @@ export class ESLNote extends ESLTrigger {
       EventUtils.dispatch(this, `${ESLNote.eventNs}:ready`);
     }
   }
+
+  /** Handles trigger open type of event */
+  @bind
+  protected _onShowEvent(event: Event) {
+    if (this._isIgnored(event.target)) return;
+    ESLTooltip.show({
+      activator: this,
+      delay: this.showDelayValue,
+      text: this.text,
+      //behavior: 'none',
+      //disableArrow: true,
+      event
+    });
+    event.preventDefault();
+  }
+
+  /** Handles trigger hide type of event */
+  @bind
+  protected _onHideEvent(event: Event) {
+    if (this._isIgnored(event.target)) return;
+    ESLTooltip.hide({
+      activator: this,
+      delay: this.hideDelayValue,
+      event
+    });
+    event.preventDefault();
+  }
 }