Add last_updated tooltip to more info dialog (#6926)

src/components/entity/state-info.js

@@ -1,4 +1,5 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+import "@polymer/paper-tooltip/paper-tooltip";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -71,13 +72,20 @@ class StateInfo extends PolymerElement {
         <div class="name" in-dialog$="[[inDialog]]">
           [[computeStateName(stateObj)]]
         </div>
-
         <template is="dom-if" if="[[inDialog]]">
           <div class="time-ago">
             <ha-relative-time
+              id="last_changed"
               hass="[[hass]]"
               datetime="[[stateObj.last_changed]]"
             ></ha-relative-time>
+            <paper-tooltip animation-delay="0" for="last_changed">
+              [[localize('ui.dialogs.more_info_control.last_updated')]]:
+              <ha-relative-time
+                hass="[[hass]]"
+                datetime="[[stateObj.last_updated]]"
+              ></ha-relative-time>
+            </paper-tooltip>
           </div>
         </template>
         <template is="dom-if" if="[[!inDialog]]">

src/translations/en.json

@@ -430,6 +430,7 @@
         "edit": "Edit entity",
         "details": "Details",
         "history": "History",
+        "last_updated": "Last updated",
         "script": {
           "last_action": "Last Action",
           "last_triggered": "Last Triggered"