--- a/devtools/client/locales/en-US/webconsole.properties
+++ b/devtools/client/locales/en-US/webconsole.properties
@@ -192,16 +192,24 @@ webconsole.menu.selectAll.accesskey=A
 webconsole.menu.openInSidebar.label=Open in sidebar
 webconsole.menu.openInSidebar.accesskey=V
 
 # LOCALIZATION NOTE (webconsole.menu.timeWarp.label)
 # Label used for a context-menu item displayed for any log. Clicking on it will
 # jump to the execution point where the log item was generated.
 webconsole.menu.timeWarp.label=Jump here
 
+# LOCALIZATION NOTE (webconsole.jumpButton.tooltip)
+# Label used for the tooltip on the "jump" button in the console. It's displayed when
+# the user recorded execution with WebReplay, is now paused in the debugger, and hover a
+# message in the console output. Clicking on it will jump to the execution point where the
+# log item was generated.
+# Parameters: %S is the level of the message.
+webconsole.jumpButton.tooltip=%S - Jump here
+
 # LOCALIZATION NOTE (webconsole.clearButton.tooltip)
 # Label used for the tooltip on the clear logs button in the console top toolbar bar.
 # Clicking on it will clear the content of the console.
 webconsole.clearButton.tooltip=Clear the Web Console output
 
 # LOCALIZATION NOTE (webconsole.toggleFilterButton.tooltip)
 # Label used for the tooltip on the toggle filter bar button in the console top
 # toolbar bar. Clicking on it will toggle the visibility of an additional bar which

--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -212,25 +212,20 @@ a {
 }
 
 .message.navigationMarker > .icon {
   color: var(--object-color);
   background-image: var(--theme-console-navigation-image);
 }
 
 
-.message > span.icon[title="Jump"] {
+.message:hover > .icon.rewindable {
   background-image:var(--theme-console-jump-image);
   background-size: 14px 14px;
   cursor: pointer;
-  opacity: 0;
-}
-
-.message:hover span.icon[title="Jump"] {
-  opacity: 1;
 }
 
 .message > .message-body-wrapper {
   flex: auto;
   min-width: 0px;
   margin: var(--console-output-vertical-padding) 0;
 }
 

--- a/devtools/client/webconsole/components/Message.js
+++ b/devtools/client/webconsole/components/Message.js
@@ -120,26 +120,22 @@ class Message extends Component {
     serviceContainer.openContextMenu(e, messageInfo);
     e.stopPropagation();
     e.preventDefault();
   }
 
   renderIcon() {
     const { level, messageId, executionPoint, serviceContainer } = this.props;
 
-    if (serviceContainer.canRewind()) {
-      return dom.span({
-        className: "icon",
-        title: "Jump",
-        "aria-live": "off",
-        onClick: () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId),
-      });
-    }
-
-    return MessageIcon({ level });
+    return MessageIcon({
+      level,
+      onRewindClick: serviceContainer.canRewind()
+        ? () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId)
+        : null,
+    });
   }
 
   render() {
     const {
       open,
       collapsible,
       collapseTitle,
       source,

--- a/devtools/client/webconsole/components/MessageIcon.js
+++ b/devtools/client/webconsole/components/MessageIcon.js
@@ -5,36 +5,55 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const {l10n} = require("devtools/client/webconsole/utils/messages");
 
+const l10nLevels = {
+  "error": "level.error",
+  "warn": "level.warn",
+  "info": "level.info",
+  "log": "level.log",
+  "debug": "level.debug",
+};
+
 // Store common icons so they can be used without recreating the element
 // during render.
-const CONSTANT_ICONS = {
-  "error": getIconElement("level.error"),
-  "warn": getIconElement("level.warn"),
-  "info": getIconElement("level.info"),
-  "log": getIconElement("level.log"),
-  "debug": getIconElement("level.debug"),
-};
+const CONSTANT_ICONS = Object.entries(l10nLevels).reduce((acc, [key, l10nLabel]) => {
+  acc[key] = getIconElement(l10nLabel);
+  return acc;
+}, {});
+
+function getIconElement(level, onRewindClick) {
+  let title = l10n.getStr(l10nLevels[level] || level);
+  const classnames = ["icon"];
 
-function getIconElement(level) {
+  if (onRewindClick) {
+    title = l10n.getFormatStr("webconsole.jumpButton.tooltip", [title]);
+    classnames.push("rewindable");
+  }
+
   return dom.span({
-    className: "icon",
-    title: l10n.getStr(level),
+    className: classnames.join(" "),
+    onClick: onRewindClick,
+    title,
     "aria-live": "off",
   });
 }
 
 MessageIcon.displayName = "MessageIcon";
 MessageIcon.propTypes = {
   level: PropTypes.string.isRequired,
+  onRewindClick: PropTypes.function,
 };
+
 function MessageIcon(props) {
-  const { level } = props;
-  return CONSTANT_ICONS[level] || getIconElement(level);
+  const { level, onRewindClick } = props;
+
+  return onRewindClick
+    ? getIconElement(level, onRewindClick)
+    : CONSTANT_ICONS[level] || getIconElement(level);
 }
 
 module.exports = MessageIcon;