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
This commit is contained in:
Austin Riba
2022-03-17 16:38:16 -07:00
committed by Tim Abbott
parent 3df0cacd9e
commit 0943b38300
2 changed files with 24 additions and 2 deletions

View File

@@ -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,