lightbox: Add tippy tooltip to lightbox title.

This commit adds a tippy tooltip to the lightbox title which enables the
user to view the filename of an image if the filename is different than
the image title.

Fixes: #21333

static/js/lightbox.js

@@ -210,9 +210,11 @@ function display_image(payload) {
     img.src = payload.source;
     $img_container.html(img).show();
 
+    const filename = payload.url?.split("/").pop();
     $(".image-description .title")
         .text(payload.title || "N/A")
-        .prop("title", payload.title || "N/A");
+        .attr("aria-label", payload.title || "N/A")
+        .prop("data-filename", filename || "N/A");
     $(".image-description .user").text(payload.user).prop("title", payload.user);
 
     $(".image-actions .open, .image-actions .download").attr("href", payload.source);
@@ -411,7 +413,7 @@ export function parse_image_data(image) {
     }
     const payload = {
         user: sender_full_name,
-        title: $parent.attr("title"),
+        title: $parent.attr("aria-label") || $parent.attr("href"),
         type,
         preview: preview_src,
         source,

static/js/tippyjs.js

@@ -267,4 +267,24 @@ export function initialize() {
             instance.destroy();
         },
     });
+
+    delegate("body", {
+        target: ".image-info-wrapper > .image-description > .title",
+        appendTo: () => document.body,
+        onShow(instance) {
+            const title = $(instance.reference).attr("aria-label");
+            const filename = $(instance.reference).prop("data-filename");
+            const $markup = $("<span>").text(title);
+            if (title !== filename) {
+                // If the image title is the same as the filename, there's no reason
+                // to show this next line.
+                const second_line = $t({defaultMessage: "File name: {filename}"}, {filename});
+                $markup.append($("<br>"), $("<span>").text(second_line));
+            }
+            instance.setContent($markup[0]);
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
 }