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 02268ee5a..f36a0f833 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -90,6 +90,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 = {};