--- a/devtools/client/inspector/rules/test/browser_rules_variables_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
@@ -28,26 +28,22 @@ function* testBasic(inspector, view) {
   let unsetVar = getRuleViewProperty(view, "#a", "font-size").valueSpan
     .querySelector(".ruleview-unmatched-variable");
   let setVarParent = unsetVar.nextElementSibling;
   let setVar = getVarFromParent(setVarParent);
   is(unsetVar.textContent, "--var-not-defined",
     "--var-not-defined is not set correctly");
   is(unsetVar.dataset.variable, "--var-not-defined is not set",
     "--var-not-defined's dataset.variable is not set correctly");
-  let previewTooltip = yield assertShowPreviewTooltip(view, unsetVar);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar);
   is(setVarParent.textContent, " var(--var-defined-font-size)",
     "var(--var-defined-font-size) parsed incorrectly");
   is(setVar.textContent, "--var-defined-font-size",
     "--var-defined-font-size is not set correctly");
   is(setVar.dataset.variable, "--var-defined-font-size = 60px",
     "--bg's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, setVar);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, setVar);
 }
 
 function* testNestedCssFunctions(inspector, view) {
   info("Test support for variable functionality for a var() nested inside " +
   "another CSS function. Format: rgb(0, 0, var(--var1, var(--var2)))");
 
   yield selectNode("#b", inspector);
   let unsetVarParent = getRuleViewProperty(view, "#b", "color").valueSpan
@@ -55,24 +51,20 @@ function* testNestedCssFunctions(inspect
   let unsetVar = getVarFromParent(unsetVarParent);
   let setVar = unsetVarParent.previousElementSibling;
   is(unsetVarParent.textContent, " var(--var-defined-r-2)",
     "var(--var-defined-r-2) not parsed correctly");
   is(unsetVar.textContent, "--var-defined-r-2",
     "--var-defined-r-2 is not set correctly");
   is(unsetVar.dataset.variable, "--var-defined-r-2 = 0",
     "--var-defined-r-2's dataset.variable is not set correctly");
-  let previewTooltip = yield assertShowPreviewTooltip(view, unsetVar);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar);
   is(setVar.textContent, "--var-defined-r-1",
     "--var-defined-r-1 is not set correctly");
   is(setVar.dataset.variable, "--var-defined-r-1 = 255",
     "--var-defined-r-1's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, setVar);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, setVar);
 }
 
 function* testBorderShorthandAndInheritance(inspector, view) {
   info("Test support for variable functionality for shorthands/CSS styles with spaces " +
   "like \"margin: w x y z\". Also tests functionality for inherticance of CSS" +
   " variables. Format: var(l, var(m)) var(x) rgb(var(r) var(g) var(b))");
 
   yield selectNode("#c", inspector);
@@ -93,69 +85,55 @@ function* testBorderShorthandAndInherita
   let setVarR = setVarRParent.firstElementChild;
   let setVarG = setVarGParent.firstElementChild;
   let setVarB = setVarBParent.firstElementChild;
 
   is(unsetVarL.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVarL.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
-  let previewTooltip = yield assertShowPreviewTooltip(view, unsetVarL);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVarL);
 
   is(setVarM.textContent, "--var-border-px",
     "--var-border-px is not set correctly");
   is(setVarM.dataset.variable, "--var-border-px = 10px",
     "--var-border-px's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, setVarM);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, setVarM);
 
   is(setVarX.textContent, "--var-border-style",
     "--var-border-style is not set correctly");
   is(setVarX.dataset.variable, "--var-border-style = solid",
     "var-border-style's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, setVarX);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, setVarX);
 
   is(setVarR.textContent, "--var-border-r",
     "--var-defined-r is not set correctly");
   is(setVarR.dataset.variable, "--var-border-r = 255",
     "--var-defined-r's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, setVarR);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, setVarR);
 
   is(setVarG.textContent, "--var-border-g",
     "--var-defined-g is not set correctly");
   is(setVarG.dataset.variable, "--var-border-g = 0",
     "--var-defined-g's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, setVarG);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, setVarG);
 
   is(setVarB.textContent, "--var-border-b",
     "--var-defined-b is not set correctly");
   is(setVarB.dataset.variable, "--var-border-b = 0",
     "--var-defined-b's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, setVarB);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, setVarB);
 }
 
 function* testSingleLevelVariable(inspector, view) {
   info("Test support for variable functionality of a single level of " +
   "undefined variables. Format: var(x, constant)");
 
   yield selectNode("#d", inspector);
   let unsetVar = getRuleViewProperty(view, "#d", "font-size").valueSpan
     .querySelector(".ruleview-unmatched-variable");
 
   is(unsetVar.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVar.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
-  let previewTooltip = yield assertShowPreviewTooltip(view, unsetVar);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar);
 }
 
 function* testDoubleLevelVariable(inspector, view) {
   info("Test support for variable functionality of double level of " +
   "undefined variables. Format: var(x, var(y, constant))");
 
   yield selectNode("#e", inspector);
   let allUnsetVars = getRuleViewProperty(view, "#e", "color").valueSpan
@@ -165,25 +143,21 @@ function* testDoubleLevelVariable(inspec
 
   let unsetVar1 = allUnsetVars[0];
   let unsetVar2 = allUnsetVars[1];
 
   is(unsetVar1.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVar1.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
-  let previewTooltip = yield assertShowPreviewTooltip(view, unsetVar1);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar1);
 
   is(unsetVar2.textContent, "--var-undefined-2",
     "--var-undefined is not set correctly");
   is(unsetVar2.dataset.variable, "--var-undefined-2 is not set",
     "--var-undefined-2's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, unsetVar2);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar2);
 }
 
 function* testTripleLevelVariable(inspector, view) {
   info("Test support for variable functionality of triple level of " +
   "undefined variables. Format: var(x, var(y, var(z, constant)))");
 
   yield selectNode("#f", inspector);
   let allUnsetVars = getRuleViewProperty(view, "#f", "border-style").valueSpan
@@ -194,29 +168,23 @@ function* testTripleLevelVariable(inspec
   let unsetVar1 = allUnsetVars[0];
   let unsetVar2 = allUnsetVars[1];
   let unsetVar3 = allUnsetVars[2];
 
   is(unsetVar1.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVar1.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
-  let previewTooltip = yield assertShowPreviewTooltip(view, unsetVar1);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar1);
 
   is(unsetVar2.textContent, "--var-undefined-2",
     "--var-undefined-2 is not set correctly");
   is(unsetVar2.dataset.variable, "--var-undefined-2 is not set",
     "--var-defined-r-2's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, unsetVar2);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar2);
 
   is(unsetVar3.textContent, "--var-undefined-3",
     "--var-undefined-3 is not set correctly");
   is(unsetVar3.dataset.variable, "--var-undefined-3 is not set",
     "--var-defined-r-3's dataset.variable is not set correctly");
-  previewTooltip = yield assertShowPreviewTooltip(view, unsetVar3);
-  yield assertTooltipHiddenOnMouseOut(previewTooltip, unsetVar3);
 }
 
 function getVarFromParent(varParent) {
   return varParent.firstElementChild.firstElementChild;
 }

--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -230,17 +230,17 @@ OutputParser.prototype = {
       firstOpts["data-variable"] =
         STYLE_INSPECTOR_L10N.getFormatStr("rule.variableValue", varName, varValue);
       firstOpts.class = options.matchedVariableClass;
       secondOpts.class = options.unmatchedVariableClass;
     } else {
       // The variable name is not valid, mark it unmatched.
       firstOpts.class = options.unmatchedVariableClass;
       firstOpts["data-variable"] = STYLE_INSPECTOR_L10N.getFormatStr("rule.variableUnset",
-                                                          varName);
+                                                                      varName);
     }
 
     variableNode.appendChild(this._createNode("span", firstOpts, result));
 
     // If we saw a ",", then append it and show the remainder using
     // the correct highlighting.
     if (sawComma) {
       variableNode.appendChild(this.doc.createTextNode(","));

--- a/devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
@@ -19,33 +19,16 @@ const PADDING = 2;
  * @param {Document} doc
  *        A document element to create the HTML elements needed for the tooltip
  * @param {String} text
  *        Text to display in tooltip
  */
 function setVariableTooltip(tooltip, doc, text) {
   // Create tooltip content
   let div = doc.createElementNS(XHTML_NS, "div");
-  div.style.cssText = `
-    height: 100%;
-    min-width: 10px;
-    max-width: 300px;
-    display: flex;
-    flex-direction: column;
-    text-align: center;`;
-  let html = `
-    <div class="devtools-monospace"
-         style="flex: 1;
-                display: flex;
-                padding: ${PADDING}px;
-                align-items: center;
-                justify-content: center;
-                min-height: 1px;">
-                ${text}
-    </div>`;
-
-  // eslint-disable-next-line no-unsanitized/property
-  div.innerHTML = html;
+  div.classList.add("devtools-monospace");
+  div.style.padding = PADDING + "px";
+  div.textContent = text;
 
   tooltip.setContent(div);
 }
 
 module.exports.setVariableTooltip = setVariableTooltip;