status-bar: add titles

This adds titles to interactive elements. This causes a small (browser-
native) tooltip to display when hovering.

src/status-bar/StatusBar.tsx

@@ -58,7 +58,11 @@ const HubInfoButton: React.VFC = (_props) => {
                 </table>
             }
         >
-            <Button minimal={true} onMouseDown={(e) => e.preventDefault()}>
+            <Button
+                title={i18n.translate(MessageId.HubInfoTitle)}
+                minimal={true}
+                onMouseDown={(e) => e.preventDefault()}
+            >
                 {deviceName}
             </Button>
         </Popover2>
@@ -82,7 +86,11 @@ const BatteryIndicator: React.VFC = (_props) => {
                 </span>
             }
         >
-            <div className="pb-battery-indicator" style={{ cursor: 'pointer' }}>
+            <div
+                title={i18n.translate(MessageId.BatteryTitle)}
+                className="pb-battery-indicator"
+                style={{ cursor: 'pointer' }}
+            >
                 <div className="pb-battery-indicator-body">
                     <ProgressBar
                         animate={charging}

src/status-bar/i18n.en.json

@@ -1,10 +1,12 @@
 {
     "hubInfo": {
+        "title": "Connected hub",
         "connectedTo": "Connected to:",
         "hubType": "Hub type:",
         "firmware": "Firmware:"
     },
     "battery": {
+        "title": "Battery",
         "low": "Battery is low. Hub will turn off soon.",
         "ok": "Battery level is OK."
     }

src/status-bar/i18n.ts

@@ -4,8 +4,10 @@
 // Status bar translation keys.
 
 export enum MessageId {
+    BatteryTitle = 'battery.title',
     BatteryLow = 'battery.low',
     BatteryOk = 'battery.ok',
+    HubInfoTitle = 'hubInfo.title',
     HubInfoConnectedTo = 'hubInfo.connectedTo',
     HubInfoHubType = 'hubInfo.hubType',
     HubInfoFirmware = 'hubInfo.firmware',