added hover tooltips

They're pretty simple to use, and automatically make themselves fit on
screen, on top of automatically disappearing and appearing of course.

I've used them a few places now, and not sure where else they can be
used, there are of course localization strings that need, well,
localization, and I'll create a PR for this on a later date.

1 files changed, 21 insertions, 0 deletions

diff --git a/src/app/css/tooltip.css b/src/app/css/tooltip.css
new file mode 100644
index 0000000..673cc64
--- /dev/null
+++ b/src/app/css/tooltip.css
@@ -0,0 +1,21 @@
+@import "theming.css";
+
+#tooltip {
+	color: white;
+	opacity: 0.0;
+	position: fixed;
+	font-weight: 600;
+	font-size: 0.8em;
+	width: max-content;
+	z-index: 99999999999;
+	pointer-events: none;
+	background: var(--bg);
+	backdrop-filter: blur(15px);
+	transition: opacity 0.15s ease-in-out;
+	border-radius: calc(var(--padding) / 1);
+	padding: calc(var(--padding) / 2.8) calc(var(--padding) / 1.8);
+}
+
+#tooltip.visible {
+	opacity: 1.0;
+}