diff --git a/devtools/client/shadereditor/shadereditor.js b/devtools/client/shadereditor/shadereditor.js
index 4a31fc601b07..52abaa034148 100644
--- a/devtools/client/shadereditor/shadereditor.js
+++ b/devtools/client/shadereditor/shadereditor.js
@@ -9,7 +9,7 @@ const promise = require("promise");
 const defer = require("devtools/shared/defer");
 const {Task} = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
-const Tooltip = require("devtools/client/shared/widgets/tooltip/Tooltip");
+const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 const Editor = require("devtools/client/sourceeditor/editor");
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const {extend} = require("devtools/shared/extend");
@@ -36,6 +36,7 @@ const EVENTS = {
 };
 exports.EVENTS = EVENTS;
 
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
 const STRINGS_URI = "devtools/client/locales/shadereditor.properties";
 const HIGHLIGHT_TINT = [1, 0, 0.25, 1]; // rgba
 const TYPING_MAX_DELAY = 500; // ms
@@ -579,9 +580,21 @@ class ShadersEditorsView {
       return;
     }
 
-    const tooltip = node._markerErrorsTooltip = new Tooltip(document);
-    tooltip.defaultOffsetX = GUTTER_ERROR_PANEL_OFFSET_X;
-    tooltip.setTextContent({ messages: messages });
+    const tooltip = node._markerErrorsTooltip = new HTMLTooltip(document, {
+      type: "arrow",
+      useXulWrapper: true
+    });
+
+    const div = document.createElementNS(XHTML_NS, "div");
+    div.className = "devtools-shader-tooltip-container";
+    for (const message of messages) {
+      const messageDiv = document.createElementNS(XHTML_NS, "div");
+      messageDiv.className = "devtools-tooltip-simple-text";
+      messageDiv.textContent = message;
+      div.appendChild(messageDiv);
+    }
+    tooltip.setContent(div);
+
     tooltip.startTogglingOnHover(node, () => true, {
       toggleDelay: GUTTER_ERROR_PANEL_DELAY
     });
diff --git a/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js b/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
index fee0cb91c59c..98c2bee26f74 100644
--- a/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
+++ b/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
@@ -32,13 +32,11 @@ async function ifWebGLSupported() {
   const tooltip = marker._markerErrorsTooltip;
   ok(tooltip, "A tooltip was created successfully.");
 
-  const content = tooltip.content;
-  ok(tooltip.content,
-    "Some tooltip's content was set.");
-  ok(tooltip.content.className.includes("devtools-tooltip-simple-text-container"),
-    "The tooltip's content container was created correctly.");
+  const containerClass = ".devtools-shader-tooltip-container";
+  const container = tooltip.panel.querySelector(containerClass);
+  ok(container, "The tooltip's content container was created correctly.");
 
-  const messages = content.childNodes;
+  const messages = container.childNodes;
   is(messages.length, 3,
     "There are three messages displayed in the tooltip.");
   ok(messages[0].className.includes("devtools-tooltip-simple-text"),
diff --git a/devtools/client/themes/shadereditor.css b/devtools/client/themes/shadereditor.css
index 9dbdf7c690e3..68b6ce936f55 100644
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -84,6 +84,15 @@
   color: var(--theme-selection-color);
 }
 
+.devtools-shader-tooltip-container .devtools-tooltip-simple-text {
+  color: var(--theme-content-color1);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.devtools-shader-tooltip-container .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
 /* Responsive sidebar */
 
 @media (max-width: 700px) {