--- a/devtools/client/shadereditor/shadereditor.js
+++ b/devtools/client/shadereditor/shadereditor.js
@@ -4,17 +4,17 @@
 "use strict";
 
 const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm");
 const {SideMenuWidget} = require("devtools/client/shared/widgets/SideMenuWidget.jsm");
 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");
 const {WidgetMethods, setNamedTimeout} =
   require("devtools/client/shared/widgets/view-helpers");
 
 // The panel's window global is an EventEmitter firing the following events:
 const EVENTS = {
@@ -31,16 +31,17 @@ const EVENTS = {
   // When the UI is reset from tab navigation
   UI_RESET: "ShaderEditor:UIReset",
 
   // When the editor's error markers are all removed
   EDITOR_ERROR_MARKERS_REMOVED: "ShaderEditor:EditorCleaned"
 };
 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
 const SHADERS_AUTOGROW_ITEMS = 4;
 const GUTTER_ERROR_PANEL_OFFSET_X = 7; // px
 const GUTTER_ERROR_PANEL_DELAY = 100; // ms
 const DEFAULT_EDITOR_CONFIG = {
   gutters: ["errors"],
@@ -574,19 +575,31 @@ class ShadersEditorsView {
   /**
    * Event listener for the 'mouseover' event on a marker in the editor gutter.
    */
   _onMarkerMouseOver(line, node, messages) {
     if (node._markerErrorsTooltip) {
       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
     });
   }
 
   /**
    * Removes all the gutter markers and line classes from the editor.
    */

--- a/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
+++ b/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
@@ -27,23 +27,21 @@ async function ifWebGLSupported() {
   const editorDocument = vsEditor.container.contentDocument;
   const marker = editorDocument.querySelector(".error");
   const parsed = shadersEditorsView._errors.vs[0].messages;
   shadersEditorsView._onMarkerMouseOver(7, marker, parsed);
 
   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"),
     "The first message was created correctly.");
   ok(messages[1].className.includes("devtools-tooltip-simple-text"),
     "The second message was created correctly.");
   ok(messages[2].className.includes("devtools-tooltip-simple-text"),
     "The third message was created correctly.");

--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -79,16 +79,25 @@
   color: var(--theme-body-color-alt);
 }
 
 .editor-label[selected] {
   background-color: var(--theme-selection-background);
   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) {
   #shaders-pane {
     max-height: 60vh;
   }
 
   #editors-splitter {