diff --git a/devtools/client/debugger/content/moz.build b/devtools/client/debugger/content/moz.build
index fcca58e656b7..49e18db23d53 100644
--- a/devtools/client/debugger/content/moz.build
+++ b/devtools/client/debugger/content/moz.build
@@ -6,6 +6,7 @@
 DIRS += [
     'actions',
     'reducers',
+    'tooltip',
     'views',
 ]
 
diff --git a/devtools/client/shared/widgets/tooltip/Tooltip.js b/devtools/client/debugger/content/tooltip/Tooltip.js
similarity index 100%
rename from devtools/client/shared/widgets/tooltip/Tooltip.js
rename to devtools/client/debugger/content/tooltip/Tooltip.js
diff --git a/devtools/client/shared/widgets/tooltip/VariableContentHelper.js b/devtools/client/debugger/content/tooltip/VariableContentHelper.js
similarity index 100%
rename from devtools/client/shared/widgets/tooltip/VariableContentHelper.js
rename to devtools/client/debugger/content/tooltip/VariableContentHelper.js
diff --git a/devtools/client/debugger/content/tooltip/moz.build b/devtools/client/debugger/content/tooltip/moz.build
new file mode 100644
index 000000000000..16eb72ae2d69
--- /dev/null
+++ b/devtools/client/debugger/content/tooltip/moz.build
@@ -0,0 +1,9 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'Tooltip.js',
+    'VariableContentHelper.js',
+)
diff --git a/devtools/client/debugger/content/tooltip/tooltips-old.css b/devtools/client/debugger/content/tooltip/tooltips-old.css
new file mode 100644
index 000000000000..19e1073b6b03
--- /dev/null
+++ b/devtools/client/debugger/content/tooltip/tooltips-old.css
@@ -0,0 +1,173 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root.theme-light {
+  --old-tooltip-simpletext-color: black;
+  --old-tooltip-simpletext-border: #d9e1e8;
+  --old-tooltip-arrow-vertical: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
+  --old-tooltip-arrow-horizontal: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
+  --old-tooltip-arrow-vertical-2x: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
+  --old-tooltip-arrow-horizontal-2x: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png");
+  --old-tooltip-arrowcontent-background: rgba(255, 255, 255, .9);
+  --old-tooltip-arrowcontent-border: #d9e1e8;
+}
+
+:root.theme-dark {
+  --old-tooltip-simpletext-color: white;
+  --old-tooltip-simpletext-border: #434850;
+  --old-tooltip-arrow-vertical: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
+  --old-tooltip-arrow-horizontal: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
+  --old-tooltip-arrow-vertical-2x: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
+  --old-tooltip-arrow-horizontal-2x: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
+  --old-tooltip-arrowcontent-background: rgba(19, 28, 38, .9);
+  --old-tooltip-arrowcontent-border: #434850;
+}
+
+.devtools-tooltip .panel-arrowcontent {
+  padding: 4px;
+}
+
+.devtools-tooltip .panel-arrowcontainer {
+  /* Reseting the transition used when panels are shown */
+  transition: none;
+  /* Panels slide up/down/left/right when they appear using a transform.
+  Since we want to remove the transition, we don't need to transform anymore
+  plus it can interfeer by causing mouseleave events on the underlying nodes */
+  transform: none;
+}
+
+.devtools-tooltip[clamped-dimensions] {
+  min-height: 100px;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+
+.devtools-tooltip[clamped-dimensions-no-min-height] {
+  min-height: 0;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
+  min-width: 400px;
+  max-width: 400px;
+}
+
+.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
+  overflow: hidden;
+}
+
+.devtools-tooltip[wide] {
+  max-width: 600px;
+}
+
+/* Tooltip: Simple Text */
+
+.devtools-tooltip-simple-text {
+  max-width: 400px;
+  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
+  padding: 8px 12px;
+  white-space: pre-wrap;
+}
+
+.devtools-tooltip-simple-text:first-child {
+  margin-top: -4px;
+}
+
+.devtools-tooltip-simple-text:last-child {
+  margin-bottom: -4px;
+}
+
+/* Tooltip: Variables View */
+
+.devtools-tooltip-variables-view-box {
+  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+}
+
+.devtools-tooltip-variables-view-box .variable-or-property > .title {
+  padding-inline-end: 6px;
+}
+
+.devtools-tooltip-iframe {
+  border: none;
+  background: transparent;
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
+.theme-tooltip-panel .panel-arrowcontent {
+  padding: 4px;
+  background: var(--old-tooltip-arrowcontent-background);
+  border-radius: 5px;
+  box-shadow: none;
+  border: 3px solid var(--old-tooltip-arrowcontent-border);
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -4px;
+}
+
+:root[platform="win"] .theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -7px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"],
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: var(--old-tooltip-arrow-vertical);
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 39px !important;
+  height: 16px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"],
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: var(--old-tooltip-arrow-horizontal);
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 16px !important;
+  height: 39px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"] {
+  margin-bottom: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  margin-top: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  margin-right: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  margin-left: var(--arrow-margin);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: var(--old-tooltip-arrow-vertical-2x);
+  }
+
+  .theme-tooltip-panel .panel-arrow[side="left"],
+  .theme-tooltip-panel .panel-arrow[side="right"] {
+    list-style-image: var(--old-tooltip-arrow-horizontal-2x);
+  }
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text {
+  color: var(--old-tooltip-simpletext-color);
+  border-bottom: 1px solid var(--old-tooltip-simpletext-border);
+}
\ No newline at end of file
diff --git a/devtools/client/debugger/debugger-controller.js b/devtools/client/debugger/debugger-controller.js
index abc32dd124c6..a8155b73a0bc 100644
--- a/devtools/client/debugger/debugger-controller.js
+++ b/devtools/client/debugger/debugger-controller.js
@@ -147,7 +147,7 @@ var DevToolsUtils = require("devtools/shared/DevToolsUtils");
 var promise = require("devtools/shared/deprecated-sync-thenables");
 var Editor = require("devtools/client/sourceeditor/editor");
 var DebuggerEditor = require("devtools/client/sourceeditor/debugger");
-var Tooltip = require("devtools/client/shared/widgets/tooltip/Tooltip");
+var Tooltip = require("./content/tooltip/Tooltip");
 var FastListWidget = require("devtools/client/shared/widgets/FastListWidget");
 var {LocalizationHelper, ELLIPSIS} = require("devtools/shared/l10n");
 var {PrefsHelper} = require("devtools/client/shared/prefs");
diff --git a/devtools/client/debugger/index.xul b/devtools/client/debugger/index.xul
index d6392a265aa3..62dab9e5c49d 100644
--- a/devtools/client/debugger/index.xul
+++ b/devtools/client/debugger/index.xul
@@ -5,8 +5,10 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/debugger/debugger.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/content/debugger/content/tooltip/tooltips-old.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/debugger.css" type="text/css"?>
+
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/debugger.dtd">
   %debuggerDTD;
diff --git a/devtools/client/debugger/views/variable-bubble-view.js b/devtools/client/debugger/views/variable-bubble-view.js
index 6409533d48bb..8637bd89f392 100644
--- a/devtools/client/debugger/views/variable-bubble-view.js
+++ b/devtools/client/debugger/views/variable-bubble-view.js
@@ -9,7 +9,7 @@
 /* globals document, window */
 "use strict";
 
-const {setTooltipVariableContent} = require("devtools/client/shared/widgets/tooltip/VariableContentHelper");
+const {setTooltipVariableContent} = require("devtools/client/debugger/content/tooltip/VariableContentHelper");
 
 /**
  * Functions handling the variables bubble UI.
diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index 95bf54e84823..585360930e69 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -28,6 +28,7 @@ devtools.jar:
     content/sourceeditor/codemirror/old-debugger.css (sourceeditor/codemirror/old-debugger.css)
     content/debugger/new/index.html (debugger/new/index.html)
 *   content/debugger/index.xul (debugger/index.xul)
+    content/debugger/content/tooltip/tooltips-old.css (debugger/content/tooltip/tooltips-old.css)
     content/debugger/debugger.css (debugger/debugger.css)
     content/debugger/debugger-controller.js (debugger/debugger-controller.js)
     content/debugger/debugger-view.js (debugger/debugger-view.js)
diff --git a/devtools/client/shared/widgets/tooltip/moz.build b/devtools/client/shared/widgets/tooltip/moz.build
index 573281496b87..2f9410c72632 100644
--- a/devtools/client/shared/widgets/tooltip/moz.build
+++ b/devtools/client/shared/widgets/tooltip/moz.build
@@ -13,8 +13,6 @@ DevToolsModules(
     'SwatchColorPickerTooltip.js',
     'SwatchCubicBezierTooltip.js',
     'SwatchFilterTooltip.js',
-    'Tooltip.js',
     'TooltipToggle.js',
-    'VariableContentHelper.js',
     'VariableTooltipHelper.js'
 )
diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css
index f2d4d92fc56b..4426d296c7db 100644
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -259,79 +259,6 @@ div.CodeMirror span.eval-text {
   min-height: 1.4em;
 }
 
-/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
-
-.theme-tooltip-panel .panel-arrowcontent {
-  padding: 5px;
-  background: rgba(19, 28, 38, .9);
-  border-radius: 5px;
-  box-shadow: none;
-  border: 3px solid #434850;
-}
-
-/* Overring panel arrow images to fit with our light and dark themes */
-
-.theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -4px;
-}
-
-:root[platform="win"] .theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -7px;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"],
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 39px !important;
-  height: 16px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"],
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 16px !important;
-  height: 39px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"] {
-  margin-bottom: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  margin-top: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"] {
-  margin-right: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  margin-left: var(--arrow-margin);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .theme-tooltip-panel .panel-arrow[side="top"],
-  .theme-tooltip-panel .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
-  }
-
-  .theme-tooltip-panel .panel-arrow[side="left"],
-  .theme-tooltip-panel .panel-arrow[side="right"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
-  }
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text {
-  color: white;
-  border-bottom: 1px solid #434850;
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
-  border-bottom: 0;
-}
-
 .devtools-textinput,
 .devtools-searchinput,
 .devtools-filterinput {
diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css
index 6d41ddda8936..564cdf848488 100644
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -242,79 +242,6 @@ div.CodeMirror span.eval-text {
   min-height: 1.4em;
 }
 
-/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
-
-.theme-tooltip-panel .panel-arrowcontent {
-  padding: 4px;
-  background: rgba(255, 255, 255, .9);
-  border-radius: 5px;
-  box-shadow: none;
-  border: 3px solid #d9e1e8;
-}
-
-/* Overring panel arrow images to fit with our light and dark themes */
-
-.theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -4px;
-}
-
-:root[platform="win"] .theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -7px;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"],
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 39px !important;
-  height: 16px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"],
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 16px !important;
-  height: 39px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"] {
-  margin-bottom: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  margin-top: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"] {
-  margin-right: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  margin-left: var(--arrow-margin);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .theme-tooltip-panel .panel-arrow[side="top"],
-  .theme-tooltip-panel .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
-  }
-
-  .theme-tooltip-panel .panel-arrow[side="left"],
-  .theme-tooltip-panel .panel-arrow[side="right"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png");
-  }
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text {
-  color: black;
-  border-bottom: 1px solid #d9e1e8;
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
-  border-bottom: 0;
-}
-
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(128, 128, 128, .5);
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css
index 0d6b13297ab8..eefd75fa13c4 100644
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -24,46 +24,6 @@
   --onboarding-link-active-color: var(--blue-70);
 }
 
-/* Tooltip widget (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
-
-.devtools-tooltip .panel-arrowcontent {
-  padding: 4px;
-}
-
-.devtools-tooltip .panel-arrowcontainer {
-  /* Reseting the transition used when panels are shown */
-  transition: none;
-  /* Panels slide up/down/left/right when they appear using a transform.
-  Since we want to remove the transition, we don't need to transform anymore
-  plus it can interfeer by causing mouseleave events on the underlying nodes */
-  transform: none;
-}
-
-.devtools-tooltip[clamped-dimensions] {
-  min-height: 100px;
-  max-height: 400px;
-  min-width: 100px;
-  max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions-no-min-height] {
-  min-height: 0;
-  max-height: 400px;
-  min-width: 100px;
-  max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
-  min-width: 400px;
-  max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
-.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
-.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
-  overflow: hidden;
-}
-.devtools-tooltip[wide] {
-  max-width: 600px;
-}
-
 /* Tooltip: CSS variables tooltip */
 
 .devtools-tooltip-css-variable {
@@ -71,33 +31,6 @@
   padding: 2px;
 }
 
-/* Tooltip: Simple Text */
-
-.devtools-tooltip-simple-text {
-  max-width: 400px;
-  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
-  padding: 8px 12px;
-  white-space: pre-wrap;
-}
-
-.devtools-tooltip-simple-text:first-child {
-  margin-top: -4px;
-}
-
-.devtools-tooltip-simple-text:last-child {
-  margin-bottom: -4px;
-}
-
-/* Tooltip: Variables View */
-
-.devtools-tooltip-variables-view-box {
-  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
-}
-
-.devtools-tooltip-variables-view-box .variable-or-property > .title {
-  padding-inline-end: 6px;
-}
-
 /* Tooltip: Tiles */
 
 .devtools-tooltip-tiles {
@@ -108,11 +41,6 @@
   background-position: 0 0, 10px 10px;
 }
 
-.devtools-tooltip-iframe {
-  border: none;
-  background: transparent;
-}
-
 .tooltip-container {
   display: none;
   position: fixed;