feature: show tooltip titles on touch screens

Signed-off-by: F.N. Claessen <felix@seita.nl>
FlexMeasures · May 14, 2024 · 46a7b1e · 46a7b1e
1 parent c2d2446
commit 46a7b1e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
@@ -1865,4 +1865,25 @@ div.heading-group {
 .breadcrumb-item + .breadcrumb-item::before {
   content: " > ";
   color: var(--primary-color);
+}
+
+/* Show tooltip titles on touch screens */
+[title] {
+	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
+	border-radius:2px;
+	position: relative;
+}
+body.touched [title]:hover > * {
+	user-select: auto
+}
+body.touched [title]:hover:after {
+	position: absolute;
+	top: 100%;
+	right: -10%;
+	content: attr(title);
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	background-color: white;
+	box-shadow: 1px 1px 3px;
+	padding: 0.3em;
+	z-index: 1;
 }
diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html
@@ -651,6 +651,13 @@
     {#- Scripts used by all views (e.g. by navigation menu) -#}
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
 
+    <!-- Add the class touched to body when the user uses any touch event. -->
+    <script>
+        document.body.addEventListener('touchstart', function() {
+          document.body.classList.add('touched');
+        });
+    </script>
+
     {% block scripts %}
 
     <!-- External scripts -->