From cc6b6bf595f1246ee3ff39d341a1e570b336361b Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <schubert@openai.com>
Date: Mon, 17 Dec 2018 12:59:38 -0800
Subject: [PATCH] Fix #95 in Chrome 69+, Safari, Firefox by reverting to JS
 based tooltip positioning. Also DRYs some styles

---
 src/components/d-cite.js      | 11 +++++------
 src/components/d-footnote.js  |  8 +-------
 src/components/d-hover-box.js | 13 ++++++++++---
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/d-cite.js b/src/components/d-cite.js
index bf03a6e..48917af 100644
--- a/src/components/d-cite.js
+++ b/src/components/d-cite.js
@@ -19,7 +19,7 @@ const T = Template('d-cite', `
 <style>
 
 :host {
-  display: inline-block;
+
 }
 
 .citation {
@@ -48,10 +48,6 @@ figcaption .citation-number {
   line-height: 1em;
 }
 
-d-hover-box {
-  margin-top: 1.9em;
-}
-
 ul {
   margin: 0;
   padding: 0;
@@ -71,7 +67,10 @@ ul li:last-of-type {
 
 <d-hover-box id="hover-box"></d-hover-box>
 
-<div id="citation-" class="citation"><slot></slot><span class="citation-number"></span></div>
+<div id="citation-" class="citation">
+  <slot></slot>
+  <span class="citation-number"></span>
+</div>
 `);
 
 export class Cite extends T(HTMLElement) {
diff --git a/src/components/d-footnote.js b/src/components/d-footnote.js
index 8acb9b4..ad7d20d 100644
--- a/src/components/d-footnote.js
+++ b/src/components/d-footnote.js
@@ -22,6 +22,7 @@ d-math[block] {
 }
 
 :host {
+
 }
 
 sup {
@@ -37,13 +38,6 @@ span {
   cursor: default;
 }
 
-.container {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  z-index: 10000;
-}
-
 .footnote-container {
   padding: 10px;
 }
diff --git a/src/components/d-hover-box.js b/src/components/d-hover-box.js
index 3ffccc9..4735f1d 100644
--- a/src/components/d-hover-box.js
+++ b/src/components/d-hover-box.js
@@ -20,9 +20,10 @@ const T = Template('d-hover-box', `
 :host {
   position: absolute;
   width: 100%;
-  left: 0;
+  left: 0px;
   z-index: 10000;
   display: none;
+  white-space: normal
 }
 
 .container {
@@ -40,10 +41,13 @@ const T = Template('d-hover-box', `
   left: 0;
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgb(250, 250, 250);
+  background-color: rgba(250, 250, 250, 0.95);
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   box-sizing: border-box;
+
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 
 </style>
@@ -117,11 +121,14 @@ export class HoverBox extends T(HTMLElement) {
   show(position) {
     this.visible = true;
     this.style.display = 'block';
+    // 10px extra offset from element
+    this.style.top = Math.round(position[1] + 10) + 'px';
   }
 
   showAtNode(node) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
     const bbox = node.getBoundingClientRect();
-    this.show([bbox.right, bbox.bottom]);
+    this.show([node.offsetLeft + bbox.width, node.offsetTop + bbox.height]);
   }
 
   hide() {