1 files changed, 49 insertions, 0 deletions
diff --git a/src/content/components/common/hint.ts b/src/content/components/common/hint.ts
new file mode 100644
index 0000000..1472587
--- /dev/null
+++ b/src/content/components/common/hint.ts
@@ -0,0 +1,49 @@
+import * as dom from 'shared/utils/dom';
+
+const hintPosition = (element) => {
+  let { left, top, right, bottom } = dom.viewportRect(element);
+
+  if (element.tagName !== 'AREA') {
+    return { x: left, y: top };
+  }
+
+  return {
+    x: (left + right) / 2,
+    y: (top + bottom) / 2,
+  };
+};
+
+export default class Hint {
+  constructor(target, tag) {
+    if (!(document.body instanceof HTMLElement)) {
+      throw new TypeError('target is not an HTMLElement');
+    }
+
+    this.target = target;
+
+    let doc = target.ownerDocument;
+    let { x, y } = hintPosition(target);
+    let { scrollX, scrollY } = window;
+
+    this.element = doc.createElement('span');
+    this.element.className = 'vimvixen-hint';
+    this.element.textContent = tag;
+    this.element.style.left = x + scrollX + 'px';
+    this.element.style.top = y + scrollY + 'px';
+
+    this.show();
+    doc.body.append(this.element);
+  }
+
+  show() {
+    this.element.style.display = 'inline';
+  }
+
+  hide() {
+    this.element.style.display = 'none';
+  }
+
+  remove() {
+    this.element.remove();
+  }
+}