support following area tags

1 files changed, 17 insertions, 3 deletions

diff --git a/src/content/components/common/hint.js b/src/content/components/common/hint.js
index cc46fd6..9ef9eba 100644
--- a/src/content/components/common/hint.js
+++ b/src/content/components/common/hint.js
@@ -1,4 +1,18 @@
 import './hint.css';
+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) {
@@ -9,14 +23,14 @@ export default class Hint {
     this.target = target;
 
     let doc = target.ownerDocument;
-    let { top, left } = target.getBoundingClientRect();
+    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 = left + scrollX + 'px';
-    this.element.style.top = top + scrollY + 'px';
+    this.element.style.left = x + scrollX + 'px';
+    this.element.style.top = y + scrollY + 'px';
 
     this.show();
     doc.body.append(this.element);