From 0bf5ac737419c06f21a11f279233386b7e2f9794 Mon Sep 17 00:00:00 2001
From: BrokenEagle <brokeneagle98@yahoo.com>
Date: Tue, 28 Jul 2020 16:29:53 +0000
Subject: [PATCH] Fix tooltips to allow for reinitialization

When Tippy is delegated to the same element more than once, that
prevents the destroy method from working, which makes it so that
users cannot change the settings and then reinitialize the tooltips.

To this end, each delegate() call is now given a different selector.
Additionally, the tooltips are given their own separate <div>'s so
that something like the second delegate() call in the UserTooltips
module can be given its own unique selector.
---
 app/javascript/src/javascripts/post_tooltips.js | 2 +-
 app/javascript/src/javascripts/user_tooltips.js | 6 +++---
 app/views/layouts/default.html.erb              | 5 +++++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/javascript/src/javascripts/post_tooltips.js b/app/javascript/src/javascripts/post_tooltips.js
index 8daf42234..b4563756c 100644
--- a/app/javascript/src/javascripts/post_tooltips.js
+++ b/app/javascript/src/javascripts/post_tooltips.js
@@ -17,7 +17,7 @@ PostTooltip.initialize = function () {
 
   delegate("body", {
     allowHTML: true,
-    appendTo: document.body,
+    appendTo: document.querySelector("#post-tooltips"),
     delay: [PostTooltip.SHOW_DELAY, PostTooltip.HIDE_DELAY],
     duration: PostTooltip.DURATION,
     interactive: true,
diff --git a/app/javascript/src/javascripts/user_tooltips.js b/app/javascript/src/javascripts/user_tooltips.js
index cc0a9f3b9..eff985a8c 100644
--- a/app/javascript/src/javascripts/user_tooltips.js
+++ b/app/javascript/src/javascripts/user_tooltips.js
@@ -11,9 +11,9 @@ UserTooltip.DURATION = 250;
 UserTooltip.MAX_WIDTH = 600;
 
 UserTooltip.initialize = function () {
-  delegate("body", {
+  delegate("#page", {
     allowHTML: true,
-    appendTo: document.body,
+    appendTo: document.querySelector("#user-tooltips"),
     delay: [UserTooltip.SHOW_DELAY, UserTooltip.HIDE_DELAY],
     duration: UserTooltip.DURATION,
     interactive: true,
@@ -26,7 +26,7 @@ UserTooltip.initialize = function () {
     onHide: UserTooltip.on_hide,
   });
 
-  delegate("body", {
+  delegate("#user-tooltips", {
     allowHTML: true,
     interactive: true,
     theme: "common-tooltip",
diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb
index e389762f9..0f902f270 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -88,6 +88,11 @@
     <%= yield :layout %>
   </div>
 
+  <div id="tooltips">
+    <div id="post-tooltips"></div>
+    <div id="user-tooltips"></div>
+  </div>
+
   <script type="application/javascript">
     if (typeof window.Danbooru !== "object") {
       window.Danbooru = {};