From 19f305dd017a124b24ce1477fba7eb6f80ac12aa Mon Sep 17 00:00:00 2001
From: +++ <bernd@nr18.space>
Date: Fri, 25 Feb 2022 14:56:23 +0100
Subject: [PATCH] tooltip zum raumstatus dazu, kommentare entfernt

---
 public/index.php | 17 +++++++++--------
 public/style.css | 24 +++++++++++++++++++-----
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/public/index.php b/public/index.php
index 5554a9f..2b7e40f 100644
--- a/public/index.php
+++ b/public/index.php
@@ -37,15 +37,16 @@
     <div class="center-content max-width">
       <div id="headline" class="flex-box row">
         <div id="header-left" class="flex-box row center">
-          <div id="status-icon" class="icon">
+          <div id="status-icon" class="icon tooltip">
+            <span class="tooltiptext">Befinden sich Leute im Raum?</span>
             <?php
-		try {
-		  include_once '../src/getContent.php';
-		  getKrautButton($status);
-		} catch(Exception $ex) {
-		  error_log("$ex", 0);
-		}
-	    ?>
+		          try {
+		            include_once '../src/getContent.php';
+		            getKrautButton($status);
+		          } catch(Exception $ex) {
+		            error_log("$ex", 0);
+		          }
+	              ?>
           </div>
           <div id="banner-div" class="flex-box column">
             <a id="banner" href="#"
diff --git a/public/style.css b/public/style.css
index 1503f2f..1c623c5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,4 +1,4 @@
-/* file: style3.css
+/* file: style.css
  * date: 2022-02-06
  * user: bernd@nr18.space
  */
@@ -129,6 +129,24 @@ h1, h2, h3, h4 {
   padding: 0;
 }
 
+.tooltip .tooltiptext {
+  visibility: hidden;
+  position: absolute;
+  left: 1.5em;
+  bottom: -1.5em;
+  color: #ffffff;
+  background-color: #000000;
+  text-align: center;
+  padding: 0.25em 1em;
+  border-radius: 0.25em;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+
 /*** head with navigation menu ***/
 
 header {
@@ -166,10 +184,6 @@ a#banner:focus {
 }
 
 nav#menu {
-  /* 'height: 100%' geht nur mit 'position: fixed'. mit 'position: absolute'
-   * wird nur der teil innerhalb der headline angezeigt. dann muß 'height:
-   * 100%' entfernt werden und das menu nimmt sich den platz, den es
-   * braucht. */
   position: fixed;
   top: 0;
   right: 0;