UX: Add tooltips for messages and notifications in header

app/assets/javascripts/discourse/widgets/header.js.es6

@@ -41,7 +41,9 @@ createWidget('header-notifications', {
         action: attrs.action,
         className: 'badge-notification unread-notifications',
         rawLabel: unreadNotifications,
-        omitSpan: true
+        omitSpan: true,
+        title: "notifications.tooltip.regular",
+        titleOptions: {count: unreadNotifications}
       }));
     }
 
@@ -62,7 +64,9 @@ createWidget('header-notifications', {
         action: attrs.action,
         className: 'badge-notification unread-private-messages',
         rawLabel: unreadPMs,
-        omitSpan: true
+        omitSpan: true,
+        title: "notifications.tooltip.message",
+        titleOptions: {count: unreadPMs}
       }));
     }
 

config/locales/client.en.yml

@@ -1287,6 +1287,13 @@ en:
       admin_options_title: "Optional staff settings for this topic"
 
     notifications:
+      tooltip:
+        regular:
+          one: "1 unseen notification"
+          other: "{{count}} unseen notifications"
+        message:
+          one: "1 unread message"
+          other: "{{count}} unread messages"
       title: "notifications of @name mentions, replies to your posts and topics, messages, etc"
       none: "Unable to load notifications at this time."
       empty: "No notifications found."