diff --git a/edit/lint-codemirror-helper.js b/edit/lint-codemirror-helper.js
index 588a202c..6106ca1c 100644
--- a/edit/lint-codemirror-helper.js
+++ b/edit/lint-codemirror-helper.js
@@ -6,7 +6,8 @@ CodeMirror.registerHelper('lint', 'csslint', code =>
     .messages.map(message => ({
       from: CodeMirror.Pos(message.line - 1, message.col - 1),
       to: CodeMirror.Pos(message.line - 1, message.col),
-      message: message.message + ` (${message.rule.id})`,
+      message: message.message,
+      rule: message.rule.id,
       severity : message.type
     }))
 );
@@ -24,7 +25,9 @@ CodeMirror.registerHelper('lint', 'stylelint', code =>
       to: CodeMirror.Pos(warning.line - 1, warning.column),
       message: warning.text
         .replace('Unexpected ', '')
-        .replace(/^./, firstLetter => firstLetter.toUpperCase()),
+        .replace(/^./, firstLetter => firstLetter.toUpperCase())
+        .replace(/\s*\([^(]+\)$/, ''), // strip the rule,
+      rule: warning.text.replace(/^.*?\s*\(([^(]+)\)$/, '$1'),
       severity : warning.severity
     }));
   })
diff --git a/edit/lint.js b/edit/lint.js
index febdddf6..eb97d1c4 100644
--- a/edit/lint.js
+++ b/edit/lint.js
@@ -237,16 +237,14 @@ function updateLintReport(cm, delay) {
           const pos = isActiveLine ? 'cursor' : (info.from.line + ',' + info.from.ch);
           // rule name added in parentheses at the end; extract it out for the info popup
           const text = info.message;
-          const parenPos = text.endsWith(')') ? text.lastIndexOf('(') : text.length;
-          const ruleName = text.slice(parenPos + 1, -1);
-          const title = escapeHtml(text);
-          const message = escapeHtml(text.substr(0, Math.min(100, parenPos)), {limit: 100});
+          const title = escapeHtml(text + `\n(${info.rule})`, {limit: 1000});
+          const message = escapeHtml(text, {limit: 100});
           if (isActiveLine || oldMarkers[pos] === message) {
             delete oldMarkers[pos];
           }
           newMarkers[pos] = message;
           return `<tr class="${info.severity}">
-            <td role="severity" data-rule="${ruleName}">
+            <td role="severity" data-rule="${info.rule}">
               <div class="CodeMirror-lint-marker-${info.severity}">${info.severity}</div>
             </td>
             <td role="line">${info.from.line + 1}</td>