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

@@ -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,

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",

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 = {};