From ed0d3978bba41549d74051734a40c1f7e6df5dae Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 16 Mar 2023 21:40:56 +0100
Subject: [PATCH] Make time tooltips interactive (#23526)

Fixes https://codeberg.org/forgejo/forgejo/issues/511

<img width="379" alt="Screenshot 2023-03-16 at 20 23 10"
src="https://user-images.githubusercontent.com/115237/225731294-4c6e4f44-bdcc-4c8c-86e2-49f7c03b377d.png">
---
 modules/timeutil/since.go   | 4 ++--
 web_src/js/modules/tippy.js | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go
index 295ba7c10e72e..53c22258c4f39 100644
--- a/modules/timeutil/since.go
+++ b/modules/timeutil/since.go
@@ -233,7 +233,7 @@ func TimeSince(then time.Time, lang translation.Locale) template.HTML {
 }
 
 func htmlTimeSince(then, now time.Time, lang translation.Locale) template.HTML {
-	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s">%s</span>`,
+	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s" data-tooltip-interactive="true">%s</span>`,
 		then.In(setting.DefaultUILocation).Format(GetTimeFormat(lang.Language())),
 		timeSince(then, now, lang)))
 }
@@ -244,7 +244,7 @@ func TimeSinceUnix(then TimeStamp, lang translation.Locale) template.HTML {
 }
 
 func htmlTimeSinceUnix(then, now TimeStamp, lang translation.Locale) template.HTML {
-	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s">%s</span>`,
+	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s" data-tooltip-interactive="true">%s</span>`,
 		then.FormatInLocation(GetTimeFormat(lang.Language()), setting.DefaultUILocation),
 		timeSinceUnix(int64(then), int64(now), lang)))
 }
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index ce8f0369f11c9..720f8ba53b9b8 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -33,6 +33,7 @@ export function initTooltip(el, props = {}) {
     content,
     delay: 100,
     role: 'tooltip',
+    ...(el.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
     ...props,
   });
 }