--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -335,17 +335,18 @@ CssRuleView.prototype = {
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
         textProperty: prop,
         toggleActive: getShapeToggleActive(node),
         point: getShapePoint(node)
       };
     } else if ((classes.contains("ruleview-variable") ||
-                classes.contains("ruleview-unmatched-variable")) && prop) {
+                classes.contains("ruleview-unmatched-variable") ||
+                classes.contains("ruleview-swatch")) && prop) {
       type = VIEW_NODE_VARIABLE_TYPE;
       value = {
         property: getPropertyNameAndValue(node).name,
         value: node.textContent,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,

--- a/devtools/client/inspector/rules/test/browser_rules_variables_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_01.js
@@ -21,34 +21,34 @@ add_task(function* () {
   let setColor = unsetColor.previousElementSibling;
   let setColorSwatch = setColor.previousElementSibling;
   is(unsetColor.textContent, " red", "red is unmatched in color");
   is(setColor.textContent, "--color", "--color is not set correctly");
   is(setColor.dataset.variable, "--color = chartreuse",
                                 "--color's dataset.variable is not set correctly");
   is(setColorSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
      "var(--color, red)'s swatch class is not set correctly");
-  is(setColorSwatch.title, "chartreuse",
+  is(setColorSwatch.dataset.variable, "chartreuse",
     "var(--color, red)'s swatch title is not set correctly");
   let previewTooltip = yield assertShowPreviewTooltip(view, setColor);
   yield assertTooltipHiddenOnMouseOut(previewTooltip, setColor);
 
   let unsetVar = getRuleViewProperty(view, "div", "background-color").valueSpan
     .querySelector(".ruleview-unmatched-variable");
   let unsetVarSwatch = unsetVar.previousElementSibling;
   let setVar = unsetVar.nextElementSibling;
   let setVarSwatch = setVar.firstElementChild.firstElementChild
   let setVarName = setVarSwatch.nextElementSibling;
   is(unsetVar.textContent, "--not-set",
      "--not-set is unmatched in background-color");
   is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
      "var(--not-set, var(--bg))'s swatch class is not set correctly");
-  is(unsetVarSwatch.title, "seagreen", "var(--not-set, var(--bg))'s swatch title is not set correctly");
+  is(unsetVarSwatch.dataset.variable, "seagreen", "var(--not-set, var(--bg))'s swatch title is not set correctly");
   is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
      "var(--bg)'s swatch class is not set correctly");
-  is(setVarSwatch.title, "seagreen", "var(--bg)'s swatch title is not set correctly");
+  is(setVarSwatch.dataset.variable, "seagreen", "var(--bg)'s swatch title is not set correctly");
   is(setVar.textContent, " var(--bg)", "var(--bg) parsed incorrectly");
   is(setVarName.textContent, "--bg", "--bg is not set correctly");
   is(setVarName.dataset.variable, "--bg = seagreen",
                                   "--bg's dataset.variable is not set correctly");
   previewTooltip = yield assertShowPreviewTooltip(view, setVarName);
   yield assertTooltipHiddenOnMouseOut(previewTooltip, setVarName);
 });

--- a/devtools/client/inspector/rules/test/browser_rules_variables_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
@@ -33,27 +33,27 @@ function* testBasic(inspector, view) {
   let setVar = getVarFromParent(setVarParent);
   let setVarSwatch = setVar.previousElementSibling;
   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");
   is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-not-defined, ...)'s swatch class is not set correctly");
-  is(unsetVarSwatch.title, "60px",
+  is(unsetVarSwatch.dataset.variable, "60px",
     "var(..., --var-defined-font-size)'s swatch title is not set correctly");
   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");
   is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-defined-font-size)'s swatch class is not set correctly");
-  is(setVarSwatch.title, "60px",
+  is(setVarSwatch.dataset.variable, "60px",
     "var(--var-defined-font-size)'s swatch title is not set correctly");
 }
 
 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);
@@ -66,27 +66,27 @@ function* testNestedCssFunctions(inspect
   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");
   is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-defined-r-2)'s swatch class is not set correctly");
-  is(unsetVarSwatch.title, "0",
+  is(unsetVarSwatch.dataset.variable, "0",
     "var(--var-defined-r-2)'s swatch title is not set correctly");
   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");
   is(setVar.textContent, "--var-defined-r-1",
     "--var-defined-r-1 is not set correctly");
   is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-defined-r-1, ...)'s swatch class is not set correctly");
-  is(setVarSwatch.title, "255",
+  is(setVarSwatch.dataset.variable, "255",
     "var(--var-defined-r-1, ...)'s swatch title is not set correctly");
 }
 
 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))");
 
@@ -117,62 +117,62 @@ function* testBorderShorthandAndInherita
   let setVarBSwatch = setVarB.previousElementSibling;
 
   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");
   is(unsetVarLSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-undefined)'s swatch class is not set correctly");
-  is(unsetVarLSwatch.title, "10px",
+  is(unsetVarLSwatch.dataset.variable, "10px",
     "var(--var-undefined)'s swatch title is not set correctly");
 
   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");
   is(setVarMSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-border-px)'s swatch class is not set correctly");
-  is(setVarMSwatch.title, "10px",
+  is(setVarMSwatch.dataset.variable, "10px",
     "var(--var-border-px)'s swatch title is not set correctly");
 
   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");
   is(setVarXSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-border-style)'s swatch class is not set correctly");
-  is(setVarXSwatch.title, "solid",
+  is(setVarXSwatch.dataset.variable, "solid",
     "var(--var-border-style)'s swatch title is not set correctly");
 
   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");
   is(setVarRSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-defined-r)'s swatch class is not set correctly");
-  is(setVarRSwatch.title, "255",
+  is(setVarRSwatch.dataset.variable, "255",
     "var(--var-defined-r)'s swatch title is not set correctly");
 
   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");
   is(setVarGSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-defined-g)'s swatch class is not set correctly");
-  is(setVarGSwatch.title, "0",
+  is(setVarGSwatch.dataset.variable, "0",
     "var(--var-defined-g)'s swatch title is not set correctly");
 
   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");
   is(setVarGSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-defined-b)'s swatch class is not set correctly");
-  is(setVarGSwatch.title, "0",
+  is(setVarGSwatch.dataset.variable, "0",
     "var(--var-defined-b)'s swatch title is not set correctly");
 }
 
 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);
@@ -181,17 +181,17 @@ function* testSingleLevelVariable(inspec
   let unsetVarSwatch = unsetVar.previousElementSibling;
 
   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");
   is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-undefined, 30px)'s swatch class is not set correctly");
-  is(unsetVarSwatch.title, "30px",
+  is(unsetVarSwatch.dataset.variable, "30px",
     "var(--var-undefined, 30px)'s swatch title is not set correctly");
 }
 
 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);
@@ -207,26 +207,26 @@ function* testDoubleLevelVariable(inspec
   let unsetVar2Swatch = unsetVar2.previousElementSibling;
 
   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");
   is(unsetVar1Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-undefined, var(..., blue))'s swatch class is not set correctly");
-  is(unsetVar1Swatch.title, "blue",
+  is(unsetVar1Swatch.dataset.variable, "blue",
     "var(--var-undefined, var(..., blue))'s swatch title is not set correctly");
 
   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");
   is(unsetVar2Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-undefined-2, blue)'s swatch class is not set correctly");
-  is(unsetVar2Swatch.title, "blue",
+  is(unsetVar2Swatch.dataset.variable, "blue",
     "var(--var-undefined-2, blue)'s swatch title is not set correctly");
 }
 
 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);
@@ -244,53 +244,53 @@ function* testTripleLevelVariable(inspec
   let unsetVar3Swatch = unsetVar3.previousElementSibling;
 
   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");
   is(unsetVar1Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-undefined, var(..., solid))'s swatch class is not set correctly");
-  is(unsetVar1Swatch.title, "solid",
+  is(unsetVar1Swatch.dataset.variable, "solid",
     "var(--var-undefined, var(..., solid))'s swatch title is not set correctly");
 
   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");
   is(unsetVar2Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-undefined-2, var(..., solid))'s swatch class is not set correctly");
-  is(unsetVar2Swatch.title, "solid",
+  is(unsetVar2Swatch.dataset.variable, "solid",
     "var(--var-undefined-2, var(..., solid))'s swatch title is not set correctly");
 
   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");
   is(unsetVar3Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(..., solid)'s swatch class is not set correctly");
-  is(unsetVar3Swatch.title, "solid",
+  is(unsetVar3Swatch.dataset.variable, "solid",
     "var(..., solid)'s swatch title is not set correctly");
 }
 
 function* testUnresolvableVariableSwatch(inspector, view) {
   info("Test support for variable swatch functionality of unresolvable var()");
 
   yield selectNode("#g", inspector);
   let unsetVarParent = getRuleViewProperty(view, "#g", "border-style").valueSpan
     .querySelector(".ruleview-unmatched-variable");
 
   let unsetVarSwatch = getVarFromParent(unsetVarParent).previousElementSibling;
   let setVarSwatch = unsetVarParent.previousElementSibling.previousElementSibling;
 
   is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-unmatched",
     "var(--var-undefined)'s swatch class is not set correctly");
-  is(unsetVarSwatch.title, "Cannot be resolved",
+  is(unsetVarSwatch.dataset.variable, "Cannot be resolved",
     "var(--var-undefined)'s swatch title is not set correctly");
   is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
     "var(--var-defined, ...)'s swatch class is not set correctly");
-  is(setVarSwatch.title, "solid",
+  is(setVarSwatch.dataset.variable, "solid",
     "var(--var-defined, ...)'s swatch title is not set correctly");
 }
 
 function getVarFromParent(varParent) {
   return varParent.firstElementChild.firstElementChild.nextElementSibling;
 }

--- a/devtools/client/inspector/shared/tooltips-overlay.js
+++ b/devtools/client/inspector/shared/tooltips-overlay.js
@@ -229,17 +229,17 @@ TooltipsOverlay.prototype = {
 
     if (type === TOOLTIP_FONTFAMILY_TYPE) {
       let font = nodeInfo.value.value;
       let nodeFront = inspector.selection.nodeFront;
       yield this._setFontPreviewTooltip(font, nodeFront);
       return true;
     }
 
-    if (type === TOOLTIP_VARIABLE_TYPE && nodeInfo.value.value.startsWith("--")) {
+    if (type === TOOLTIP_VARIABLE_TYPE) {
       let variable = nodeInfo.value.variable;
       yield this._setVariablePreviewTooltip(variable);
       return true;
     }
 
     return false;
   }),
 

--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -1254,30 +1254,27 @@ OutputParser.prototype = {
    *
    * @param  {String} variable
    *         Value of the variable to append.
    *         null if the variable has no value.
    * @param  {Node} node
    *         Node to append swatch to.
    */
   _appendVariable: function (variable, node) {
-    let swatch;
+    let opts = {};
 
     if (variable === null) {
-      swatch = this._createNode("span", {
-        class: "ruleview-swatch ruleview-variableswatch-unmatched",
-        title: "Cannot be resolved"
-      });
+      opts.class = "ruleview-swatch ruleview-variableswatch-unmatched";
+      opts["data-variable"] = "Cannot be resolved";
     } else {
-      swatch = this._createNode("span", {
-        class: "ruleview-swatch ruleview-variableswatch-matched",
-        title: variable
-      });
+      opts.class = "ruleview-swatch ruleview-variableswatch-matched";
+      opts["data-variable"] = variable;
     }
 
+    let swatch = this._createNode("span", opts);
     node.appendChild(swatch);
   },
 
   /**
    * Wrap some existing nodes in a filter editor.
    *
    * @param {String} filters
    *        The full text of the "filter" property.