From ac35ee5fabbbd11d41e3d7e6e08496e1926c01eb Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Wed, 13 Dec 2017 20:45:22 -0500
Subject: [PATCH] Fix balloon popups for metadata.

---
 src/modules/metadata.js | 41 +++++++++++++++++++++++++----------------
 styles/tooltips.scss    | 16 ++++++++--------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/modules/metadata.js b/src/modules/metadata.js
index dd1482c2..7ae1b2b1 100644
--- a/src/modules/metadata.js
+++ b/src/modules/metadata.js
@@ -349,24 +349,33 @@ export default class Metadata extends Module {
 								el._ffz_destroy = el._ffz_outside = null;
 							};
 
-							const tt = el._ffz_popup = new Tooltip(document.body.querySelector('.twilight-root') || document.body, el, {
-								manual: true,
-								html: true,
+							const parent = document.body.querySelector('.twilight-root') || document.body,
+								tt = el._ffz_popup = new Tooltip(parent, el, {
+									manual: true,
+									html: true,
 
-								tooltipClass: 'ffz-metadata-balloon tw-balloon block',
-								arrowClass: 'tw-balloon__tail',
-								innerClass: 'tw-pd-1',
+									tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
+									arrowClass: 'tw-balloon__tail tw-absolute',
+									innerClass: 'tw-pd-1',
 
-								popper: {
-									placement: 'top-end'
-								},
-								content: (t, tip) => def.popup.call(this, el._ffz_data, tip, () => refresh_fn(key)),
-								onShow: (t, tip) =>
-									setTimeout(() => {
-										el._ffz_outside = new ClickOutside(tip.outer, destroy);
-									}),
-								onHide: destroy
-							})
+									popper: {
+										placement: 'top-end',
+										modifiers: {
+											preventOverflow: {
+												boundariesElement: parent
+											},
+											flip: {
+												behavior: ['top', 'bottom', 'left', 'right']
+											}
+										}
+									},
+									content: (t, tip) => def.popup.call(this, el._ffz_data, tip, () => refresh_fn(key)),
+									onShow: (t, tip) =>
+										setTimeout(() => {
+											el._ffz_outside = new ClickOutside(tip.outer, destroy);
+										}),
+									onHide: destroy
+								});
 
 							tt._enter(el);
 						});
diff --git a/styles/tooltips.scss b/styles/tooltips.scss
index e27f8590..d1b3b899 100644
--- a/styles/tooltips.scss
+++ b/styles/tooltips.scss
@@ -32,8 +32,8 @@ body {
 		}
 	}
 
-	&[x-placement^="left"] > .tw-balloon__tail {
-		right: -3px;
+	&[x-placement^="right"] > .tw-balloon__tail {
+		left: -3px;
 		box-shadow: -1px 1px 0 #dad8de;
 
 		.tw-theme--dark & {
@@ -45,8 +45,8 @@ body {
 		}
 	}
 
-	&[x-placement^="right"] > .tw-balloon__tail {
-		left: -3px;
+	&[x-placement^="left"] > .tw-balloon__tail {
+		right: -3px;
 		box-shadow: 1px -1px 0 #dad8de;
 
 		.tw-theme--dark & {
@@ -108,16 +108,16 @@ body {
 		}
 	}
 
-	&[x-placement^="left"] {
+	&[x-placement^="right"] {
 		.ffz__tooltip--arrow {
-			right: -3px;
+			left: -3px;
 			border-radius: 0 2px 0 0;
 		}
 	}
 
-	&[x-placement^="right"] {
+	&[x-placement^="left"] {
 		.ffz__tooltip--arrow {
-			left: -3px;
+			right: -3px;
 			border-radius: 0 0 0 2px;
 		}
 	}